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

我不知道怎么说，但我有类似的代码：

---

为什么如果我在按钮1之后单击按钮2，动画会变得混乱？是因为在执行removeClass时，它也具有转换速度吗？如果是这样的话，在转换完全停止后，如何使其仅成为addClass？或者至少立即停止动画。

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

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

您可以在

---

动画需要大约5千万秒才能完成。您正试图在同一按钮单击事件中删除和添加动画类。我试图解释的是，如果从button元素中删除类，实际上动画不会停止。完成动画需要时间

通过在删除类后设置setTimeout解决了该问题

请检查此项。

更新的答案 我更新了你的小提琴（）

animationend-动画结束时激发（注意，永不激发） （适用于无限动画）

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

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

---

我试过了，没法用。你能告诉我怎么在JSFIDLE上做吗？是的，这是可行的，但这是唯一的办法吗？无论如何，这不是一个好的解决方案，因为有很多原因，setTimeout不一定在那个确切的时间触发，只在指定的最短时间内触发。如果更改持续时间，还需要在两个位置更改代码？这一点都不可靠。另外，如果你不知道另一个解决方案，你不应该说这是唯一的一个，因为有一个解决方案。

$("#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');
     });
});

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