will-change

will-change

用于优化即将发生的元素动画的实用工具，这些元素预计会发生变化。

类名样式

类名	样式
`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 属性旨在作为处理已知性能问题的最后手段。避免过度使用这些实用程序，或者仅仅为了预测性能问题而使用，因为它实际上可能导致页面性能降低。

使用 will-change-[<value>] 语法来设置 will-change 属性基于完全自定义的值

<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() 函数。