Propiedad will-change de CSS: cuándo utilizarla y cuándo no

La will-changepropiedad CSS a menudo se malinterpreta o no se usa correctamente. En esta breve publicación, desmitificaré la propiedad para que pueda hacer que sus animaciones y transiciones CSS sean lo más eficientes posible.

¿Qué es el cambio de voluntad?

En pocas palabras, la will-changepropiedad es una forma de indicar al navegador con antelación qué propiedades y elementos es probable que se manipulen. Con esta información, el navegador puede realizar optimizaciones antes de que sean necesarias, lo que puede dar como resultado una experiencia más fluida.

Un ejemplo de esto sería si estuviéramos aplicando un transformen un elemento y pudiéramos informar al navegador de esto de la siguiente manera:

will-change: transform;

También puedes declarar múltiples valores de la siguiente manera:

will-change: transform, opacity;

Valores de cambio de voluntad

will-changePuede tomar cuatro valores posibles:

• auto – el navegador aplicará las optimizaciones
• scroll-position : indica que el autor espera animar o cambiar la posición de desplazamiento del elemento en un futuro cercano
• contenido : indica que el autor espera animar o cambiar algo sobre el contenido del elemento en el futuro cercano.
• custom-indent – ​​indica que el autor espera animar o cambiar la propiedad con el nombre dado en el elemento en el futuro cercano.

El valor en el que nos vamos a centrar es , custom-indentpor ejemplo transform, , opacity, etc.

¿Cuándo utilizar will-change?

Como lo indica el MDN de Mozilla, will-changedebe usarse como último recurso.

Si abusamos del uso de will-change, sufriremos pérdidas de rendimiento, que es exactamente lo contrario de lo que queremos. Si las animaciones o transiciones son fluidas y nítidas, no es necesario utilizar will-change. El navegador ya está realizando optimizaciones sin el uso de will-change.

¡No hagas esto!

Un error común que la gente comete al usar will-changees este:

.my-element:hover {  will-change: opacity;  transition: opacity .25s ease-in-out;}

Esto está haciendo más daño que bien, will-changeestá en tiempo futuro, por lo que no debería aplicarse cuando la animación está sucediendo.

Un mejor uso de will-changeaquí sería ponerlo will-changeen el padre de my-elementla siguiente manera:

.parent-element:hover {  will-change: opacity;}.my-element:hover {  transition: opacity .25s ease-in-out;}

Esto permite que el navegador sepa con anticipación que debe optimizarse para este cambio. Recuerde utilizar esto como último recurso si sus animaciones son inestables o parpadean.

Eliminación de la voluntad de cambio

Mozilla recomienda eliminarlo will-changeuna vez que el elemento haya terminado de cambiar. Por eso también se recomienda configurarlo will-changemediante JavaScript para poder eliminarlo. Si will-changese configura en la hoja de estilos CSS, no se puede eliminar.

En cuanto al código, esto es bastante simple y se ve así:

const el = document.querySelector('.parent-element')el.addEventListener('mouseenter', addWillChange)el.addEventListener('animationend', removeChange)const addWillChange = () = {  this.style.willChange = 'opacity'}const removeChange = () = {  this.style.willChange = 'auto'}

El código anterior es muy simple, agregamos nuestro will-changecuando parent-elementse pasa el mouse sobre él y luego, cuando animationendse activa el evento, eliminamos nuestro will-change.

La configuración will-changeen una hoja de estilos puede tener sentido en algunas circunstancias. Una circunstancia como esta sería la de un elemento con el que es probable que se interactúe varias veces, como un efecto dominó en un botón o una barra lateral que se desliza hacia afuera. Por lo general, solo debería haber unas pocas will-changepropiedades en una hoja de estilos; el resto idealmente debería configurarse mediante JavaScript.

Conclusión

Esta fue una pequeña introducción a will-change, y si estás buscando profundizar, realmente te recomiendo que consultes el excelente artículo de Sara Soueidan sobre el tema.

¡Gracias por leer!