jQuery：使用CSS动画动态元素？

Question

我正在尝试使用jquery和CSS为我的页面上的元素设置动画。

使用jquery动态创建元素。

我遇到的问题是元素根本没有正确的动画。它们实际上是闪烁的，然后往返，然后是不想要的动画。

这是一个更好的解释问题的小提琴：

https://jsfiddle.net/npvsrkcy/12/

这是我想要实现的那种动画：

这是我的整个jquery代码：

$.each($('.images '), function(i, el){
    $(el).css({'opacity':0});
    setTimeout(function(){
       $(el).animate({

         '-webkit-animation-delay': i+'s',
         'animation-delay': i+'s',
         'opacity':1.0
       }, 450);
    },500 + ( i * 500 ));
//add delay 3s 
i+1000;
});

有人可以就此问题提出建议吗？

Answer 1

这应该是您正在寻找的效果的良好起点。

我将动画移动到了一个类中。没有必要指定css动画延迟。在循环中应用类和超时是我们所需要的。

$.each($('.images '), function(i, el){
    setTimeout(function(){
       $(el).addClass('animate');
    },500 + ( i * 500 ));
//add delay 3s 
i+1000;
});

https://jsfiddle.net/8kpzwtoz/