为什么 CSS 动画会延迟？

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

我看到了 Fiddle，问题出在您的 console.log 上。它延迟了这个过程。我已经更新了小提琴。 Try Now