运行功能后才animate.css removeClass过渡完成

Question

animate.css

我不知道如何把这个，但我有类似下面的代码：JSFiddle

$("#btn1").click(function(){ 
    $('#test1').addClass('animated infinite pulse tada'); 
    $('#test2').addClass('animated infinite pulse tada'); 
    $('#test3').addClass('animated infinite pulse tada'); 
}); 

$("#btn2").click(function(){ 
    $('button').removeClass('animated infinite pulse tada'); 
    $('#test1').addClass('animated infinite pulse tada'); 
    $('#test2').addClass('animated infinite pulse tada'); 
    $('#test3').addClass('animated infinite pulse tada'); 
    $('#test5').addClass('animated infinite pulse tada'); 
}); 

为什么在动画成为如果我在按钮1之后点击按钮2，那么这种混乱？是否因为在执行removeClass时它也具有转换速度？如果是这样，我怎样才能在转换完全停止后才添加类？或者至少立即停止动画。

Answer 1

动画tooks几乎50毫秒内完成。您尝试在相同的按钮单击事件中删除并添加动画类。我想解释的是，如果你从按钮元素中移除了类，实际上动画不会停止。花费时间完成动画。

通过在删除类后设置setTimeout解决了该问题。请致电Fiddle。

Answer 2

您可以关闭仅用于删除类的动画延迟。尝试CSS：

button:not(.animated) { 
    animation-delay: none; 
} 

Answer 3

可以使用当Then in jQuery

$("#btn1").click(function(){ 
    $('#test1, #test2, #test3').addClass('animated infinite pulse tada'); 
}); 

$("#btn2").click(function(){ 
     $.when(function(){ $('button').removeClass('animated infinite pulse tada');}) 
    .then(function(x) { 
      $('#test1, #test2, #test3, #test5').addClass('animated infinite pulse tada'); 
    }); 
}); 

Answer 4

更新答案

我更新了你的小提琴（https://jsfiddle.net/5cm2cg0L/14/）

animationend - 火灾动画结束时（注意，永远不会触发 无限动画）

我使用的事件检测下一个动画迭代并在其调用后删除动画。之后，我从同一元素中解除事件绑定，以便在需要时动画再次回到原位。

function removeAnimation(elm) { 
    var animationIteration = "animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration"; 
    elm.one(animationIteration, function() { 
    $(this).unbind(animationIteration).removeClass('animated infinite pulse tada') 
    }); 
}