CSS 过渡不适用于 jQuery 的 .toggleClass() [重复]答案

【问题标题】：CSS transition doesn't work with jQuery's .toggleClass() [duplicate]CSS 过渡不适用于 jQuery 的 .toggleClass() [重复]
【发布时间】：2020-05-26 19:24:35
【问题描述】：

当您单击链接时，在显示/隐藏切换期间应用任何 CSS 动画。切换有效，但未应用动画。

$('.working-hours-link').click(function(e) {
  $(this).siblings(".hours").toggleClass('hidden shown');
});

.hidden {
  background-color: #fff;
  color: #000;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  display: none;
}

.shown {
  background-color: #000;
  color: #fff;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="working-hours-link" href="#">Show working hours</a>
<br>
<div class="hours hidden">
  Sunday: 12:00 pm-6:00 pm
</div>

https://jsfiddle.net/ako6uzxt/

【问题讨论】：

您希望看到哪种过渡？颜色和背景实际上是褪色的，但显示属性就像一个开关一样运行。也许您期望不透明度过渡（从 0 到 1）？
CSS 转换不适用于 display 属性。这里有一些alternatives。
这能回答你的问题吗？ Transitions on the CSS display property

标签： javascript jquery html css

【解决方案1】：

transition 不适用于display。尝试将display:none 和display:block 更改为opacity:0 和opacity:1

【讨论】：

这会留下空白。
所以试试max-height:0 和max-height:150px 或者你的物品高度的最大值
这可行，但鼠标光标在悬停时会对隐藏的文本（在opacity: 0;）做出反应。
因为它溢出了.. 设置overflow:hidden

【解决方案2】：

问题是因为transition CSS 规则需要在元素上应用/删除类之前存在。因此，您可以将其添加到 .hours 规则中。此外，您不再需要在 transition 上使用供应商前缀。

还请注意，您不能为display 设置动画，因此我使用了opacity 和height 的组合。

$('.working-hours-link').click(function(e) {
  $(this).siblings(".hours").toggleClass('hidden shown');
});

.hours {
  transition: height, opacity 1s;
}

.hidden {
  background-color: #fff;
  color: #000;
  height: 0;
  opacity: 0;
}

.shown {
  background-color: #000;
  color: #fff;
  height: 20px;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="working-hours-link" href="#">Show working hours</a>
<br>
<div class="hours hidden">
  Sunday: 12:00 pm-6:00 pm
</div>

【讨论】：

切换项不会是固定高度，因为每个兄弟的内容量不同。
所以只需将 height 替换为 max-height 并输入最可用的 tall 项的值

【解决方案3】：

在 css display: none 和 display: block 中过渡将不起作用。因为默认情况下隐藏文件不在html中..单击按钮后文件将显示..替换显示无我们可以使用opacity：0;请删除 display: none 和 display:block

css

.hidden {
  opacity: 0; 
  visibility: hidden;
}
.shown {
  opacity: 1;
  visibility:visible;
}

【讨论】：

@G-Cyr 是的，当然.. 但在 IE 旧版本中，可见性：隐藏是必须的..
visibility 留下空白空间。
如果在 opacity:0 div 中有一个锚标签。它没有显示，但锚标签点击会起作用。我的意思是功能会起作用。所以我们可以添加可见性：隐藏

【解决方案4】：

请添加此代码

.hours{display:none;background-color:#000;color:#fff;}

$('.working-hours-link').click(function(e) {
    $(this).siblings(".hours").toggleClass('hidden');
});
$('.working-hours-link').click(function(e) {
    $(this).siblings(".hours").slideToggle();
});

【讨论】：

这种工作，但真的很笨重，显示动画是淡出，而隐藏是滑动。