如何使用 jquery 重置 css 动画 class？

Question

    $('#btn_color').on('click', function(){
    if($('h1').hasClass('bounceInUp')){

        $('h1').removeClass('bounceInUp');
        $('h1').addClass('tada');

    }else if($('h1').hasClass('tada')){

        $('h1').removeClass('tada');
        $('h1').addClass('tada');

    }
});

当我加载我的页面时，'bounceInUp' class 被添加到我的 h1。但是我想通过添加 'tada' class.

在点击时播放第二个动画

问题是动画只在第一次点击时播放。当'tada' class一次又一次添加时，有没有办法"reload"动画？

我正在使用它来为我的文字制作动画： http://daneden.github.io/animate.css/

Answer 1

您可以 jquery 的 setTimeout 在动画结束后删除 class：

setTimeout(function() {
  $('h1').removeClass('tada');
}, 3000); // The length of your animation

Answer 2

已编辑

您可以附加 animationend 事件的单个侦听器以在动画结束时移除动画类

$(document).on('click', '#btn_color', function (e) {
    $('h1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function (e) {
        $('h1').removeClass('animated bounceInUp');
    });

    $('h1').removeClass('animated bounceInUp').addClass('animated bounceInUp');
});

Demo

Answer 3

用这个简单的代码你就可以做到（你必须使用 .width() ）：

$('h1').removeClass('tada');
$('h1').width();
$('h1').addClass('tada');

如何使用 jquery 重置 css 动画 class？

How to reset a css animation class using jquery?

jquery

css

animation

addclass

animate.css

已编辑

Demo