javascript - jQuery:使用 CSS 为动态元素设置动画？

Question

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

元素是使用 jquery 动态创建的。

我遇到的问题是元素根本无法正确设置动画。他们实际上是在眨眼，来回走动，然后动画化，这是不需要的。

这是一个可以更好地解释问题的 fiddle :

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/