亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Angular Pre-Bootstrap 動畫可以在另一個線程上運行或異步運行嗎?

Angular Pre-Bootstrap 動畫可以在另一個線程上運行或異步運行嗎?

紅顏莎娜 2024-01-03 17:07:54
有沒有辦法在單獨的線程上顯示預加載動畫,直到角度完全加載?我發現動畫非常緊張而且不流暢。我查看了控制臺,動畫僅在加載腳本之間更新。如果腳本需要一段時間才能加載,則動畫會凍結例如,當以下腳本加載 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 會消耗資源,請注意過度使用可能會導致進一步的性能問題。不建議默認將其放在每個動畫之前。


查看完整回答
反對 回復 2024-01-03
  • 1 回答
  • 0 關注
  • 182 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號