will-change（变化预告）

示例

使用 will-change 优化

使用 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.