在添加新的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> 

Answer 1

不能向列表中添加動畫預期的效果，而不是你需要的新元素。

這裏是使用JQuery .animate向下滑動（高度動畫）（）函數

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

更多細節上.animate的一個簡單的例子（）見。

Answer 2

如果您不想使用jQuery，但使用原生CSS動畫，則新元素的類不會更改時不會觸發動畫。你可以做的是插入的元素，然後添加類超時後：

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

「新」和「動畫」是，你必須提供適當的CSS當然自定義類的。

出於性能原因，您主要想使用CSS動畫。看到這裏：what's faster? CSS3 transitions or jQuery animations?