交错CSS动画 [英] Staggering CSS Animations

问题描述

我有一个CSS动画，我想要应用在200ms的时间间隔。我已经设置了这样的CSS：

I have a CSS animation that I want to be applied in 200ms intervals. I've set up the CSS like this:

.discrete {
    position:relative;
    opacity:1;

    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}

.discrete.out {
    left:-40px;
    opacity:0;    
}

然后我要交错的应用程序。 discrete.out 类。我试过以下：

I then want to stagger the application of the .discrete.out class in 200ms intervals. I've tried the following:

$('.discrete').each(function() {
    $(this).delay(200).addClass('out');
});

并且：

$('.discrete').each(function() {
   var theNode = $(this); 
   setTimeout(function() {
       theNode.addClass('out');
    }, 200);
});

但在这两种情况下，动画只是立刻出现！

But in both cases, the animation just occurs all at once!

任何想法？

推荐答案

您可以使用

var els = $('.discrete'),
    i = 0,
    f = function () {
        $(els[i++]).addClass('out');
        if(i < els.length) setTimeout(f, 200);
    };
f();

演示

这篇关于交错CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！