will-change

will-change

forced-color-adjust

用於最佳化即將發生的元素動畫，這些元素預期會變更。 Class

用於最佳化即將發生的元素動畫，這些元素預期會變更。	Class
`樣式`	`will-change-auto`
`will-change: auto;`	`will-change-scroll`
`will-change: scroll-position;`	`will-change-contents`
`will-change: contents;`	`will-change-transform`
`will-change: transform;`	`will-change-<custom-property>`
`will-change: var(<custom-property>);`	`will-change-[<value>]`

樣式

will-change-auto

will-change: auto;

will-change-scroll

will-change: scroll-position;

will-change-contents

will-change: contents;

will-change-transform

will-change: transform;

will-change-<custom-property>

will-change: var(<custom-property>);

will-change-[<value>]

will-change: `<value>`;

使用 will-change 進行最佳化

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

使用 will-change-scroll、will-change-contents 和 will-change-transform utilities 來最佳化預期在不久的將來變更的元素，方法是指示瀏覽器在實際開始之前準備必要的動畫。

建議您在元素變更之前立即套用這些 utilities，然後在使用 will-change-auto 完成後不久將其移除。

使用自定義值 will-change使用 -[<value>] 語法來設置 will-change 屬性

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

基於完全自定義的值 will-change對於 CSS 變數，您也可以使用 -[<value>]

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

-(<custom-property>) will-change-[這只是 var(<custom-property>)]