爲什麼CSS動畫延遲？

我想在長時間運行的JS函數中設置一個「更新」圖像。我正在使用JQuery添加一個類（「旋轉」），這是我在CSS中定義的，以觸發動畫 - 這在自己運行時運行良好。但是，當我按照帶有長時間JS函數調用的addClass時，即使該類是即時應用的，動畫也會有延遲。爲什麼CSS動畫延遲？

有人可以告訴我我要去哪裏嗎&如何在長時間運行函數運行之前讓動畫啓動？

這的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'); 
} 

}

來源

2015-02-05 Richard S

可能是因爲20000次迭代調用'console.log（）'循環阻塞了線程 – haim770 2015-02-05 17:56:49

http://stackoverflow.com/questions/6989734/how-to-force-ui-updates-in-the-瀏覽器雖然很長的JavaScript計算 - 解釋了原因。更新後的示例http://jsfiddle.net/gLas4k23/5/ – Jasen 2015-02-05 18:01:52

這是因爲您的for循環必須在動畫開始之前完成。一旦你刪除該循環，動畫立即開始。

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

我認爲你必須使用setTimeout()功能，讓您期望的結果。

來源

2015-02-05 17:59:33

SetTimeout解決了問題 - 謝謝 – 2015-02-05 18:39:11

-1

我看到小提琴，問題出在你的console.log。它拖延了這個過程。我已經更新了小提琴。 Try Now

來源

2015-02-05 18:06:02 MihirUj

循環中的console.log用於說明問題並模擬長時間運行的函數。 – 2015-02-05 18:37:35

爲什麼CSS動畫延遲？

回答

相關問題