立即添加和删除相同的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-