如何动画化“;简单jquery过滤”;只使用css

how to animate "simple jquery filtering" by using css only

本文关键字：过滤 jquery css 简单 动画 何动画      更新时间：2023-09-26

当元素被javascript过滤时，我试图为它们设置动画，但下面的代码不起作用。有什么建议吗？这就是我到目前为止所拥有的。http://jsfiddle.net/ejkim2000/J7TF4/

$("#ourHolder").css("animation","scaleUp 0.3s linear 0.4s forwards");
$("#ourHolder").css({"animation" : "scaleDown 0.3s linear 0.4s forwards"});

转念一想，有没有其他方法可以让我只使用css来制作元素的动画？

我建议您使用CSS转换。我相信这就是你想要做的，但我在任何地方都找不到引用的"scaleDown"动画。当在.item元素上切换一个额外的".hidden"类时，我的解决方案会对它们的宽度和高度进行动画处理：

#ourHolder div.item.hidden {
    transition: all 0.3s linear
}
#ourHolder div.item.hidden {
    width: 0;
    height: 0;
    overflow: hidden;
}

上的完整解决方案http://jsfiddle.net/5pKwy/

编辑：使用最小高度和最小宽度：http://jsfiddle.net/5pKwy/1/

相关文章：