在javascript計算時使用CSS動畫
[英]Using CSS animation while javascript computes
問題描述
我正在開發一個需要在啟動時生成和計算一堆數組的Web應用程序。 我希望在發生這種情況時顯示加載頁面，並且可能會使用css動畫播放一些內容，但似乎CSS動畫會在執行javascript時掛起。 我已經有一個加載欄，它更新了處理的關鍵事件，但我想使用css-transitions來平滑它。
我想知道在javascript執行時是否有任何方法可以讓某些動畫生效？
我知道我可以設法不時地向瀏覽器提供控制以讓它刷新，但我發現用javascript在后台計算某些東西只是凍結整個界面是愚蠢的。
編輯：這是我所說的一個愚蠢的例子： http ： //jsfiddle.net/YWefx/13/如果你禁用css過渡，每次迭代都會更新欄，但如果你啟用它，過渡將只發生在最后。 所以我最終要么必須在每個循環之間等待400ms，除了動畫之外只做4秒鍾，最后有一個平滑的動畫（沒有顯示進度條的好處），或者沒有設置動畫條。
1 個解決方案
解決方案1
3 已采納 2012-10-05 19:49:34
CSS3動畫不會被Javascript阻止，除非有一些激烈的處理（在這種情況下，你可能會得到口吃）。
如果你在加載過程中觸發它們，我可以看到它們被延遲，直到它們到達腳本的那一部分。
解決此問題的一種方法是在腳本的最開始設置timeTime，以在特定時間觸發動畫更改。
另一個（可能更好）選項是使用關鍵幀。 確保在加載開始前調用此方法。 http://dev.w3.org/csswg/css3-animations/#keyframes
在 javascript 中使用 requestAnimationFrame 時沒有動畫
[英]No animation while using requestAnimationFrame in javascript
使用onclick使用JavaScript將Css Animation應用於類
[英]Apply Css Animation to a class with onclick Using JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.