実行機能はanimate.css removeClassの移行が完了し

Question

animate.css

た後、私はこれを置く方法を知らないが、私は、このようなコードがあります：それはアニメになるということですなぜJSFiddle

$("#btn1").click(function(){ 
    $('#test1').addClass('animated infinite pulse tada'); 
    $('#test2').addClass('animated infinite pulse tada'); 
    $('#test3').addClass('animated infinite pulse tada'); 
}); 

$("#btn2").click(function(){ 
    $('button').removeClass('animated infinite pulse tada'); 
    $('#test1').addClass('animated infinite pulse tada'); 
    $('#test2').addClass('animated infinite pulse tada'); 
    $('#test3').addClass('animated infinite pulse tada'); 
    $('#test5').addClass('animated infinite pulse tada'); 
}); 

をボタン1の後にボタン2をクリックすると障害が発生しますか？なぜなら、removeClassを実行すると、移行速度もあるからですか？もしそうなら、どうやって移行が完全に停止した後にaddClassだけにするのですか？または、少なくとも即座にアニメーションを停止します。

Answer 1

あなたが使用することができます。同じボタンのクリックイベントでアニメーションクラスを削除して追加しようとしています。私が説明しようとしていることは、ボタン要素からクラスを削除すると、実際にアニメーションが停止しないということです。アニメーションの完成には時間がかかりました。

クラスを削除した後にのsetTimeoutを設定して問題を解決しました。

これをチェックしてください。Fiddle

Answer 2

クラスを削除するだけでアニメーションの遅延をオフにすることができます。そのCSSを試してみてください：

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

Answer 3

アニメーションが完了するまでに、ほぼ50millisecondsをtooksときThen in jQuery

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

Answer 4

私はあなたのフィドル（https://jsfiddle.net/5cm2cg0L/14/）

animationend更新答え

を更新しました - 私は、イベントを使用火災アニメーションが終了する（注意は、無限のアニメーションのための を発射することはありません）

を次のアニメーション反復を検出し、呼び出された後にアニメーションを削除します。その後、アニメーションを必要なときにいつでも元に戻すことができるように、同じ要素からイベントをバインド解除します。

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