隐藏/显示带有 CSS 过渡的 add/removeClass 元素

Question

我想用 CSS 转换隐藏/显示带有 addClass 和 removeClass 函数动画的元素。我以这种方式尝试过，但是当我添加类时，“活动”显示未显示。

.hidden {
  display: none;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}

.active {
  transition: display .5s ease;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}

#test {
  width: 100px;
  height: 40px;
  background: red;
}

——

$('#btn').on('click', function(){
   $('#test').toggleClass('active');
});

——

<div id="test" class="hidden">Hallo!</div>
<input type="button" id="btn" value="show/hide">

提琴手

我怎么能做到？谢谢你

Answer 1

我认为这最好用jquery解决，而不是css转换。如果您只想显示和隐藏一个元素，只需使用 jquery fadeIn 和 fadeOut 即可，无需任何 css 规则。

$('#btn').on('click', function(){
   $('#test').fadeToggle("slow");
});

这是更新的小提琴。

有关 fadeToggle 的更多信息，请参阅此链接。