使用CSS動畫，而javascript計算

我正在開發一個Web應用程序，需要在啓動時生成和計算一堆數組。我希望在發生這種情況時顯示一個加載頁面，並且可能會使用CSS動畫播放一些內容，但似乎在執行javascript時CSS動畫會掛起。我已經有一個加載欄在處理的關鍵事件上進行了更新，但我想使用css轉換來平滑一些。使用CSS動畫，而javascript計算

我想知道是否有任何方法讓javascript執行時動畫？

我知道我可以管理回到控制瀏覽器不時讓它刷新，但我覺得很愚蠢的是，用JavaScript計算背景的東西只是凍結你的整個界面。

編輯：這是一個愚蠢的例子是什麼我談論：http://jsfiddle.net/YWefx/13/ 如果禁用CSS過渡，酒吧被更新在每次迭代，但是如果你啓用它，過渡只會發生在最後。所以我最終要麼在每個循環之間等待400毫秒，要麼失去4秒除了動畫之外什麼都不做，最後有一個平滑的動畫（失去了顯示進度條的好處），或者沒有動畫吧。

來源

2012-10-05 TonioElGringo

使用jquery動畫怎麼樣？ – Rayshawn

剛剛使用gif圖像怎麼樣？ – karaxuna

我相信jquery動畫有相同的限制，那就是任何密集計算都會凍結它們。至於gif圖像，它們將用於重複「等待」圖標，但不適用於加載欄中的平滑效果。 – TonioElGringo

CSS3動畫不會被Javascript阻止，除非有一些緊張的處理正在進行（在這種情況下，您可能會出現口吃）。

如果您在加載過程中觸發它們，我可能會看到它們延遲到它們到達腳本的該部分。

解決此問題的一種方法是在腳本的最開始處設置TimeTime以在特定時間觸發動畫更改。

另一個（也許更好）選項將使用關鍵幀。確保在加載開始之前調用它。 http://dev.w3.org/csswg/css3-animations/#keyframes

來源

2012-10-05 19:49:34 Dcullen

這不會回答他的問題。如果JavaScript鎖定瀏覽器線程（長時間運行的一系列代碼），CSS動畫將停止。看到這裏：http://jsfiddle.net/Shmiddty/8p5Ah/1/動畫不會恢復，直到while循環完成後。 – Shmiddty

準確地說，我用另一個例子編輯了我的問題，專注於我的實際問題。 – TonioElGringo

這工作對我來說：http://jsfiddle.net/8p5Ah/5/（不是瀏覽器測試，只是鉻） – Dcullen

使用CSS動畫，而javascript計算

回答

相關問題