有沒有辦法在單獨(dú)的線程上顯示預(yù)加載動(dòng)畫，直到角度完全加載？我發(fā)現(xiàn)動(dòng)畫非常緊張而且不流暢。我查看了控制臺(tái)，動(dòng)畫僅在加載腳本之間更新。如果腳本需要一段時(shí)間才能加載，則動(dòng)畫會(huì)凍結(jié)例如，當(dāng)以下腳本加載 main.js、styles.js，尤其是vendor.js 時(shí)，此動(dòng)畫會(huì)凍結(jié)，凍結(jié)時(shí)間為 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 回答
拉風(fēng)的咖菲貓
TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊
您正在使用轉(zhuǎn)換，理論上它應(yīng)該使用與 UI 分開的線程，因此它不應(yīng)該被 JS 阻止。
在 CSS 中，您可以嘗試使用will-change動(dòng)畫的屬性列出將要更改的特定屬性，如下所示：
.element {
will-change: transform, opacity;
}will-change表示元素的屬性將發(fā)生變化，以便瀏覽器可以做出適當(dāng)?shù)臏?zhǔn)備。
使用 will-change 會(huì)消耗資源，請(qǐng)注意過度使用可能會(huì)導(dǎo)致進(jìn)一步的性能問題。不建議默認(rèn)將其放在每個(gè)動(dòng)畫之前。
- 1 回答
- 0 關(guān)注
- 202 瀏覽
添加回答
舉報(bào)
0/150
提交
取消