Question

我有div和button的简单html。我还有CSS3 Transition的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实现中的合法错误，或者至少是非常意外的错误。因为如果你做了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-

立即添加和删除相同的CSS类

3 个答案: