will-change

示例(Examples)

¥Examples

优化将会改变(Optimizing with will change)

¥Optimizing with will change

使用 will-change-scroll、will-change-contents 和 will-change-transform 工具优化预计在不久的将来会发生变化的元素，方法是指示浏览器在实际开始之前准备必要的动画：

¥Use the will-change-scroll, will-change-contents and will-change-transform utilities to optimize an element that's expected to change in the near future by instructing the browser to prepare the necessary animation before it actually begins:

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

建议你在元素更改之前应用这些工具，然后在它使用完 will-change-auto 后不久将其删除。

¥It's recommended that you apply these utilities just before an element changes, and then remove it shortly after it finishes using will-change-auto.

will-change 属性旨在用作处理已知性能问题的最后手段。避免过多地使用这些工具，或者只是因为预期会出现性能问题，因为这实际上可能会导致页面性能下降。

¥The will-change property is intended to be used as a last resort when dealing with known performance problems. Avoid using these utilities too much, or simply in anticipation of performance issues, as it could actually cause the page to be less performant.

使用自定义值(Using a custom value)

¥Using a custom value

使用 will-change-[<value>] 语法 根据完全自定义的值设置 will-change property：

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