互动性
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>; |
示例(Examples)
优化将会改变(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)
使用 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() 函数。