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