div의 스택을 우아하게 애니메이트합니다.

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 엘프.