javascript - CSS 不使用 Jquery 添加/删除类进行动画处理

Question

好的，我有一个投资组合，我正在尝试对其进行分类。当您单击导航中的其中一个链接时，它将根据分配给它们的 ID 对图像进行排序。我可以使用 JQuery 函数，但它不会设置动画。此外，包含图像的容器也不会设置动画，就像所有 CSS 动画都已关闭一样……我也在使用 bootstrap。

我基本上是为了好玩而尝试构建这个，但我遇到了 CSS 没有为类设置动画的问题。我已经关注这个很久了，它可能很简单，但我没有看到。

CSS:

.category-item{
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.hide{
display: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

JQUERY:

$(document).ready(function(){
// Portfolio Sort
$(".categorys").click(function(){
  var category = $(this).attr('id');
  //alert(category); //test nav
  if (category == "featured") {
      $(".category-item").addClass("hide");
      setTimeout(function(){
        $(".category-item").removeClass("hide");
    }, 300);
  }
 })
});

这是演示 JSFiddle(没有图像，但基本上它应该动画消失和回来。)

Answer 1

display: none 不是动画列表的一部分。请改用 opacity: 0。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties