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

Question

我在父 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>

score 0 · Accepted Answer

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

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

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

有关 .animate() 的更多详细信息，请参阅http://api.jquery.com/animate/。

score 0 · Accepted Answer

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

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

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

出于性能原因，您主要想使用 CSS 动画。看这里：什么更快？CSS3 过渡还是 jQuery 动画？

2 回答 2