0

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

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

有任何想法吗？

4

3 回答 3

4

你可以使用

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

演示

于 2013-09-28T23:06:49.620 回答
3

尝试使用 jQuery 动画队列：http: //jsfiddle.net/gwwar/7zm6q/2/

function createWorkQueueFunction($element) {
    return function(next) {
        $element.addClass("out");
        next();
    };
}

$('button').click(function() {
    var queue = $({}); //use the default animation queue
    $(".discrete").each(function() {
        queue.queue(createWorkQueueFunction($(this)));
        queue.delay(200);
    });
});

但是为什么你的例子不起作用？

以下不工作的原因是，jQuery 会在给 fx 队列添加 200 毫秒延迟后立即添加 'out' 类。换句话说， delay() 不会暂停未添加到队列中的项目。请参阅：jQuery 中的队列是什么？有关 jQuery 队列如何工作的更多信息。

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

在第二个示例中，您为每个 .discrete 元素添加了相同的超时。因此，大约 200 毫秒后，每个人将几乎同时添加一个类。相反，您可能希望为每个元素设置 200 毫秒、400 毫秒、600 毫秒等超时。

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

于 2013-09-28T23:06:15.450 回答
0

我创建了适用于所有框架的简单 2 行解决方案

let dl = 0.2; //time-delay // <animation class> <gap animation> document.querySelectorAll('.card.fade-in').forEach(o=>{dl+=0.2;o.style.animationDelay=dl+'s'});

于 2019-12-05T18:39:15.787 回答