Как удалить класс при завершении анимации?

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, как вы видите на вершине, но когда я добавил анимированный отскока класс должен быть удален после окончания анимации. это неудобно? Я не смог бы сделать этот обратный вызов и другим способом, не могли бы вы мне помочь?

Answer 1

После добавления класса вы можете прослушивать событие animationend, а затем удалить слушатель класса и события в обратном вызове, когда animationend уволен.

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