有没有办法在单独的线程上显示预加载动画，直到角度完全加载？我发现动画非常紧张而且不流畅。我查看了控制台，动画仅在加载脚本之间更新。如果脚本需要一段时间才能加载，则动画会冻结例如，当以下脚本加载 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 关注
- 110 浏览
添加回答
举报
0/150
提交
取消