更新回答

Question

我不知道该怎么做，但我的代码与此类似：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时它还具有转换速度吗？如果是这样，如何在转换完全停止后将其设置为addClass？或者至少立即停止动画。

Answer 1

您可以关闭动画延迟以仅删除课程。试试那个CSS：

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

Answer 2

您可以在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 3

动画花了将近50毫秒才完成。您正尝试在同一个按钮单击事件中删除并添加动画类。我想要解释的是，如果你从按钮元素中删除了类，实际上动画并没有停止。花了很长时间才完成动画。

在删除课程后设置 setTimeout 解决了这个问题。

请检查此class selectors。

Answer 4

更新回答

我更新了你的小提琴（http://localhost:8080/app2）

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

我使用一个事件来检测下一个动画迭代，并在调用后删除动画。之后，我从同一个元素解除绑定事件，以便动画能够在需要时再次返回。

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

仅在animate.css removeClass转换完成后运行函数

4 个答案:

更新回答