好的,我有一个投资组合,我正在尝试对其进行分类。当您单击导航中的其中一个链接时,它将根据分配给它们的 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 (没有图像,但基本上它应该动画消失和回来。)
最佳答案
display: none
不是动画列表的一部分。请改用 opacity: 0
。
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
关于javascript - CSS 不使用 Jquery 添加/删除类进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43360031/