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

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

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

$（'.list'）。前置（$（''）；

我的问题是如何设置这个新div的动画，以便其他div向下滑动

以下是用于此目的的JSFIDLE：

---

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

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

$（'.list'）。前置（$（''）。动画（{height:“50px”}，
1500 ));

---

有关.animate（）的更多详细信息，请参见。

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

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

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

---

出于性能原因，您主要希望使用CSS动画。请参见此处：

很抱歉，我无法在我提供的JSFIDLE链接上使用它。

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

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