javascript - 惊人的 CSS 动画

Question

我有一个 CSS 动画，我想以 200 毫秒的间隔应用它。我已经像这样设置了 CSS:

.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;    
}

然后我想以 200 毫秒的间隔错开应用 .discrete.out 类。我尝试了以下方法:

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

还有这个:

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

但在这两种情况下，动画都是同时发生的!

有什么想法吗？

Answer 1

你可以使用

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

Demo