すぐに同じCSSクラスを追加して削除してください

Question

私はdivとbuttonという単純なhtmlを持っています。 CSS3トランジションのCSSクラスもあります。

.animate 
{ 
    -webkit-animation-name: animation; 
    -webkit-animation-duration: 0.3s; 
    -webkit-animation-iteration-count: 2; 
} 

ボタンをクリックしてアニメーションを開始します。だから、すぐに削除して.animateクラスをdivに追加するスクリプトを書いたのですが、残念ながらそれは動作しません。確認してください：

("#button").click(function(){ 
    startAnimation(); 
    }); 

    function startAnimation() 
    { 
     if ($("#test-div").hasClass('animate')==true) 
     { 
      $("#test-div").removeClass('animate'); 
      startAnimation(); 
     } 
     else 
     { 
      $("#test-div").addClass('animate'); 
     } 
    } 

なぜjqueryは同じクラスをすぐに削除できないのですか？どうすれば修正できますか？

さらに、セレクタをクリックしてcss3トランジションを開始する別の方法がありますか？

ありがとうございました。

UPD。私は、これはややWebKitの実装では合法的なバグ、または非常に予想外の少なくとも何かのように思える（これは単純に間違っていたので、私のオリジナルの答えは、編集を経て「削除」された。）

jsfiddle.net/PfzZN/1/

Answer 1

DOMを変更するスクリプトが同じスレッド内にある場合、何らかの理由でスレッドが終了するまで変更が適用されません。したがって、あなたの方法で、ブラウザは、アニメーションクラスが削除され、同じスレッドに追加されるため、何も起こらなかったかのように見えます。

回避策として、これで十分でしょうか？

function startAnimation() 
{ 
    $("#flash-message").removeClass('animate'); 
    setTimeout(function(){ 
     $("#flash-message").addClass('animate') 
    },1); 
} 

Answer 2

でスクリプトをアップロード。 setTimeoutの場合は、次のようになります。

function startAnimation() 
{ 
    $("#flash-message").toggleClass('animate');  
    if (!$("#flash-message").hasClass('animate')) 
    { 
     setTimeout(function() 
     { 
      $("#flash-message").addClass('animate');  
     }, 1); 
    } 
} 

次に動作します。つまり、後になるまでクラスの追加を遅らせることは、Webkitがアニメーションを再起動する必要があることを認識させるようです。

偉大な解決策ではありませんが、1ミリ秒であるという事実setTimeoutは、少なくともタイミング問題ではありません...しかし、かなり奇妙です。

Answer 3

また、JSを使用してアニメーションイベントをリッスンすることもできます。これは難しいですが、将来あなたのアニメーションに関係しない任意のタイムアウトなどより優れています。これをチェックアウト：

http://www.w3.org/TR/css3-animations/#animation-events-