有沒有辦法在單獨的線程上顯示預加載動畫,直到角度完全加載?我發現動畫非常緊張而且不流暢。我查看了控制臺,動畫僅在加載腳本之間更新。如果腳本需要一段時間才能加載,則動畫會凍結例如,當以下腳本加載 main.js、styles.js,尤其是vendor.js 時,此動畫會凍結,凍結時間為 1 到 2 秒。如下圖所示 <!doctype html> <html> <head> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta charset="utf-8"> <title>My Application</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <style> app-root { display: flex; justify-content: center; align-items: center; height: 100vh; color: #fff; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif; font-size: 2.5em; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); } body { transition: opacity 0 ease-in-out 1s; background: darkgray; margin: 0; padding: 0; } @keyframes dots { 50% { transform: translateY(-.4rem); } 100% { transform: translateY(0); } } .d { animation: dots 1.5s ease-out infinite; } .d-2 { animation-delay: .9s; } .d-3 { animation-delay: 1s; } </style> Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span> </app-root> </body> </html>
1 回答

拉風的咖菲貓
TA貢獻1995條經驗 獲得超2個贊
您正在使用轉換,理論上它應該使用與 UI 分開的線程,因此它不應該被 JS 阻止。
在 CSS 中,您可以嘗試使用will-change
動畫的屬性列出將要更改的特定屬性,如下所示:
.element { will-change: transform, opacity; }
will-change
表示元素的屬性將發生變化,以便瀏覽器可以做出適當的準備。
使用 will-change 會消耗資源,請注意過度使用可能會導致進一步的性能問題。不建議默認將其放在每個動畫之前。
- 1 回答
- 0 關注
- 182 瀏覽
添加回答
舉報
0/150
提交
取消