优雅地动画一堆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.

这是 jsfiddle/tcq8kuy6/1/ 说明了我动画的当前状态。

Here is a jsfiddle/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; }

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);

希望有帮助。