优雅地动画一堆divs [英] elegantly animate a stack of divs
本文介绍了优雅地动画一堆divs的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试实现一个不错的动画,但是我有点卡住使用CSS只是为了达到我想要的效果。目前我正在使用animate.css为新元素设置动画,但旧元素不会优雅地移动,因为我没有进一步的动画。
I am trying to achieve a nice animation, however I am a bit stuck using CSS only to achieve the effect that I want. Currently I am using animate.css to animate new elements in, but the old element dont move gracefully, since I have no further animation.
这是 http://jsfiddle.net/tcq8kuy6/1/ 说明了我动画的当前状态。
Here is a http://jsfiddle.net/tcq8kuy6/1/ illustrating the current state of my animation.
setInterval(function(){
var newbox = "<div class='child animated bounceInDown'></div>"
$('.container').prepend(newbox);
}, 2000);
推荐答案
为了做到这一点,我做了几件事情: -
In order to make this work I did a couple of things:-
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
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);
希望有帮助。
这篇关于优雅地动画一堆divs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文