摇摆不定的CSS动画

时间:2013-09-28 22:46:37

标签: javascript jquery css css-animations

我有一个CSS动画,我希望以200ms的间隔应用。我已经设置了这样的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;    
}

然后我想以200ms的间隔错开.discrete.out类的应用。我尝试了以下内容:

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

而且:

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

但在这两种情况下,动画都会立即发生!

有什么想法吗?

3 个答案:

答案 0 :(得分:4)

您可以使用

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

Demo

答案 1 :(得分: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 ms延迟后立即添加'out'类。换句话说,delay()不会暂停未添加到队列的项目。有关jQuery队列如何工作的更多信息,请参阅:What are queues in jQuery?

  

$('。discrete')。each(function(){       $(本).delay(200).addClass( '出来'); });

在第二个示例中,您将为每个.discrete元素添加相同的超时。所以在大约200ms后,每个人几乎同时会加入一个类。相反,您可能希望为每个元素设置200ms的超时,然后是400ms,然后是600ms等等。

  

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

答案 2 :(得分:0)

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

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'});