本文介绍了交错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();演示
更多推荐
交错CSS动画
发布评论