立即添加和刪除相同的CSS類

Question

我有簡單的HTML與div和button。此外，我有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。我在jsfiddle.net/PfzZN/1/

Answer 1

如果對DOM進行更改的腳本位於同一個線程中，則出於某種原因，直到線程完成後纔會應用更改。所以，按照你的方式，瀏覽器會看到沒有發生任何事情，因爲'animate'類被刪除並添加到同一個線程中。

作爲解決方法，這是否足夠好？

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

Answer 2

（我原來的答覆是通過編輯「已刪除」，因爲這是完全錯誤的。）

這似乎有點像WebKit的執行合法的bug，或者至少一件很意外的上傳腳本。因爲如果你做一個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-