Question

我试图在长时间运行的JS函数中设置一个“更新”图像。我正在使用我在CSS中定义的JQuery添加一个类（“旋转”）以触发动画 - 这在它自己运行时工作正常。但是，当我使用长期运行的JS函数调用跟随addClass时，动画会有延迟，即使该类是即时应用的。

有人能告诉我出错的地方吗？如何在运行长跑功能之前启动动画？

这个JSFiddle说明了问题：http://jsfiddle.net/gLas4k23/2/ - 在“doSomething”完成之前旋转开始，但是如果没有调用doSomething则会出现明显的延迟。

html:
<div id='updateIcon' class='update'></div>

css:

.update {
    width: 40px;
    height: 40px;
    background: url("http://s24.postimg.org/4psxulnkh/update_light.png") no-repeat;
    background-size: 40px;
    cursor: pointer;
}

.update.spinning {
    -webkit-animation: spinner 1s infinite linear;  
}

@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}

JS:
$('#updateIcon').on('click', function(e){
    console.log('i have been clicked');
    $('#updateIcon').addClass('spinning');
    doSomething();
})


function doSomething(){
 console.log('doing something')

 for(var i=0;i<20000;i++){
     console.log('waiting');
 }

}

Answer 1

这是因为你的for循环必须在动画开始之前完成。删除该循环后，动画立即启动。

看看：http://jsfiddle.net/gLas4k23/4/

我认为您必须使用setTimeout()功能来获得所需的结果。

Answer 2

我看到了小提琴，问题在于你的console.log。它推迟了这个过程。我已经更新了小提琴。 Try Now

为什么CSS动画会延迟？

2 个答案: