动画结束时如何删除 class？

Question

我有 jQuery 代码如下；

$(document).ready(function() {
 $("#btn").on("click",function(){
    $(".article_heading").addClass("animated bounce",function(){
        $(".article_heading").removeClass("animated bounce");
    });
 });
});

我的问题是 animate.css.and 由于这个问题我不能多次玩 animate.css 我想用 jquery 解决，正如你在顶部看到的但是当我添加了动画反弹 class 它必须在我的动画结束后删除。不可能吗？我不能做那个回调和其他方式你能帮我解决这个问题吗

Answer 1

添加 class 后，您可以监听 animationend 事件，然后在 animationend 触发时移除回调中的 class 和事件监听器。

$("#btn").on("click", function() {
  $(".article_heading").addClass("animated bounce").on('animationend', function (e) {
    $(this).removeClass("animated bounce").off('animationend');
  });
});

您还可以使用 .one() 附加事件，以便它只被触发一次（这意味着处理程序不需要在回调中删除）。

$("#btn").on("click", function() {
  $(".article_heading").addClass("animated bounce").one('animationend', function (e) {
    $(this).removeClass("animated bounce");
  });
});

动画结束时如何删除 class？

How can I remove a class when an animation is over?

jquery

css

animate.css