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 进行优化

使用 will-change-scroll、will-change-contents 和 will-change-transform 工具类，通过指示浏览器在动画真正开始前做好准备，来优化预期即将发生变化的元素：

<!-- [!code classes:will-change-scroll] -->
<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() 函数。