Interactividad
Utilidades para optimizar las próximas animaciones de elementos que se espera que cambien.
| Clase | Estilos |
|---|---|
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>; |
Usa las utilidades will-change-scroll, will-change-contents y will-change-transform para optimizar un elemento que se espera que cambie en el futuro cercano, indicando al navegador que prepare la animación necesaria antes de que realmente comience:
<div class="overflow-auto will-change-scroll"> <!-- ... --></div>Se recomienda aplicar estas utilidades justo antes de que un elemento cambie, y luego eliminarlas poco después de que termine usando will-change-auto.
La propiedad will-change está pensada para ser utilizada como último recurso cuando se trata de problemas de rendimiento conocidos. Evita usar estas utilidades en exceso, o simplemente anticipando problemas de rendimiento, ya que en realidad podría hacer que la página sea menos eficiente.
Usa la sintaxis will-change-[<value>] para establecer el/la propiedad will-change basándose en un valor completamente personalizado:
<div class="will-change-[top,left] ..."> <!-- ... --></div>Para variables CSS, también puedes usar la sintaxis will-change-(<custom-property>) :
<div class="will-change-(--my-properties) ..."> <!-- ... --></div>Esto es solo un atajo para will-change-[var(<custom-property>)] que añade la función var() por ti automáticamente.