javascript - 如何仅使用 css 为“简单 jquery 过滤”设置动画

Question

我试图在元素被 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 为元素设置动画？

Answer 1

我建议你使用 CSS 过渡来做到这一点。我相信这就是你想要做的，但我在任何地方都找不到引用的“scaleDown”动画。当在它们上切换一个额外的“.hidden”类时，我的解决方案会为 .item 元素的宽度和高度设置动画：

#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/