爲什麼我需要在jQuery調用之間放置1ms setTimeout（）？

我正在使用CSS過渡有點倒計時吧：爲什麼我需要在jQuery調用之間放置1ms setTimeout（）？

.livebar { 
    background-color: black; 
    transition: width 15s linear; 
    width: 100%; 
    height: 5px; 
}

此代碼不能正常工作（在Chrome），在某種意義上說，沒有過渡。寬度會立即進入0：

$("#barbag").append("<div class='livebar'></div>"); 
$(".livebar").css("width", "0");

...但是這個代碼精美的作品：

$("#barbag").append("<div class='livebar'></div>"); 
setTimeout(function(){$(".livebar").css("width", "0")}, 1);

此外，在控制檯作品分別做了兩個語句，而是粘貼在這兩個失敗。

似乎Chrome需要一些時間後創建.livebar股使過渡「積極」。這是一個已知的錯誤，還是我做錯了什麼，或者是完全不同的事情？

來源

2017-07-29 Lars P

我認爲這是與從堆棧event loop

事件循環處理功能，以及使用的setTimeout回調函數會在堆棧中，而（「.livebar‘）得到排隊。CSS（’寬度」，「0」）;只要處理器看到它就會運行。

零延遲實際上並不意味着回撥將在零毫秒後熄滅。以延遲0（零）毫秒爲單位調用setTimeout不會在給定時間間隔後執行回調函數。執行取決於隊列中等待任務的數量。

所以在你的情況下，動畫必須等待$（「＃barbag」）。append（「」）;先完成然後申請CSS。因此，它需要堆疊排隊，否則會觸發得太早。

來源

2017-07-29 19:18:45

您可以使用此代碼修復問題：

演示：https://output.jsbin.com/basusos

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#barbag").append("<div class='livebar'></div>"); 
    $(".livebar").stop(true, true).animate({width: 0}, 100); 
}); 
</script> 
</head> 
<body> 
    <div id="barbag">Animate Width Zero</div> 
</body> 
</html>

來源

2017-07-29 19:26:37

這是使用JS的動畫不過，當CSS是更適合這是不理想的。 –

這幾乎肯定會起作用，就像我的'setTimeout（）'修復程序一樣，但我想了解這裏發生了什麼！ –

爲什麼我需要在jQuery調用之間放置1ms setTimeout（）？

回答

相關問題