在添加新的DOM子元素时显示动画

Question

我在parent div中有一个div列表。我现在在这个列表的开头添加另一个div。我正在做这个：

$('.list').prepend($('<div class="cell one "></div>'));

我的问题是，我如何动画添加新的div，以便其余的div只是向下滑动。

这是它的JSFiddle：http://jsfiddle.net/2qbyB/

<div class="list">
   <div class="cell two "></div>
   <div class="cell three "></div>
   <div class="cell four "></div>
</div>

Answer 1

您不能将动画添加到列表中以获得所需的效果，而是需要在新元素上添加动画。

下面是一个使用JQuery .animate()函数向下滑动(高度动画)的简单示例

$('.list').prepend($('<div class="cell one "></div>').animate({height: "50px" }, 
1500 ));

有关.animate()的更多细节，请参见http://api.jquery.com/animate/。

Answer 2

如果你不想使用jQuery而是原生的CSS动画，当新元素的类没有改变时，动画不会被触发。您可以做的是插入元素，然后在超时后添加类：

setTimeout(function() {
    $('.new').addClass('animate');
});

"new“和"animate”当然是自定义类，您必须为它们提供适当的CSS。

出于性能原因，您主要希望使用CSS动画。查看此处：what's faster? CSS3 transitions or jQuery animations?