will-change

範例（Examples）

使用 will change 最佳化（Optimizing with will change）

使用 will-change-scroll、will-change-contents 和 will-change-transform 通用類別來最佳化預期在近期會變更的元素，指示瀏覽器在動畫實際開始之前準備必要的動畫：

<div class="overflow-auto will-change-scroll">  <!-- ... --></div>

建議你在元素變更之前套用這些通用類別，然後在變更完成後使用 will-change-auto 將其移除。

will-change 屬性旨在處理已知效能問題時作為最後手段使用。避免過度使用這些通用類別，或僅為了預防效能問題而使用，因為這實際上可能導致頁面效能變差。

使用自訂值（Using a custom value）

使用 will-change-[<value>] 語法，根據完全自訂的值來設定 will-change property：

<div class="will-change-[top,left] ...">  <!-- ... --></div>

對於 CSS 變數，你也可以使用 will-change-(<custom-property>) 語法：

<div class="will-change-(--my-properties) ...">  <!-- ... --></div>

這只是 will-change-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。