Question

我想實現一個很好的動畫，但是我有點卡住使用CSS只實現我想要的效果。目前，我正在使用animate.css爲新元素設置動畫，但舊元素不會優雅地移動，因爲我沒有其他動畫。

這是一個http://jsfiddle.net/tcq8kuy6/1/說明我的動畫的當前狀態。

setInterval(function(){ 
    var newbox = "<div class='child animated bounceInDown'></div>" 
$('.container').prepend(newbox); 

}, 2000); 

Answer 1

fiddle

爲了使這項工作我做了幾件事情： -

1 CSS

.child { 
width: 40px; 
height: 40px; 
display: block; //inline block results in jerkiness when inserting items 
margin:2px; //added margin to compensate for inline-block becoming block. 
border: 1px solid #AAAAAA; 
} 

2 JS

setTimeout(function(){ 
    var newbox = "<div class='child animated bounceInDown'></div>" 
    $(newbox).prependTo('.container').hide().slideDown(500);//notice that I prepend to the container, then hide the 'newbox' and then slide it down -> this gives the desired effect. 

}, 2000); 

希望這H ELPS。