javascript - 为什么 CSS 动画会延迟？

Question

我试图在长时间运行的 JS 函数中设置一个“更新”图像旋转。我正在使用我在我的 CSS 中定义的 JQuery 添加一个类(“旋转”)来触发动画 - 这在单独运行时效果很好。但是，当我在 addClass 后面调用一个长时间运行的 JS 函数时，动画会出现延迟，即使类是即时应用的。

谁能告诉我哪里出了问题以及如何在长时间运行的函数运行之前启动动画？

这个 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() 函数才能获得所需的结果。