ブートストラップアニメーションが正常に動作しない

Question

ブートストラップアニメーションhereが見つかります。アニメーションが終了したら削除したいウェブサイトでは、それを助けるトリガーを見つけることができます。 ボタンをクリックすると、クラスがすぐに削除されるという問題があります。

<button class="btn btn-primary" onclick="foo(this)">Press here</button> 
<script> 
function foo(element){ 
    $(element).addClass("animated shake"); 
    $(element).on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', $(element).removeClass("animated shake")); 
    } 
</script> 

Answer 1

だけanimatonが終了するまで待つように、アニメーションの継続時間のタイムアウトを追加します。

function foo(element){ 
    $(element).addClass("animated shake"); 
    var duration = $(element).css("animation-duration"); 
    setTimeout(function() { 
     $(element).removeClass("animated shake"); 
    }, duration); 
}