交错CSS动画

本文介绍了交错CSS动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个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();

演示