will-change

will-change

用于优化预期会发生变化的元素即将进行的动画的工具类。

Class Styles

Class	Styles
`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-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-scroll、will-change-contents 和 will-change-transform 工具类来优化预期在近期会发生变化的元素，通过指示浏览器在实际变化开始前预先准备必要的动画：

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

建议在元素即将变化时应用这些工具类，并在变化完成后使用 will-change-auto 移除它们。

will-change 属性旨在作为处理已知性能问题时的最后手段。避免过度使用这些工具类，或仅仅为了预防性能问题而使用，因为这实际上可能会导致页面性能下降。

Use the will-change-[<value>] syntax to set the will-change 属性 based on a completely custom value:

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

For CSS variables, you can also use the will-change-(<custom-property>) syntax:

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

This is just a shorthand for will-change-[var(<custom-property>)] that adds the var() function for you automatically.