Las transiciones CSS son una buena forma de crear interactividad., transition al estado inicial de un elemento, y el navegador anima la transición entre los dos estados. Las transiciones para variables intrínsecas del elemento como auto han sido un problema para los desarrolladores web durante décadas, y la única opción era calcular la altura dinámicamente mediante JavaScript.
Otro reto consiste en iniciar las transiciones cuando un elemento recibe su primer estilo, por ejemplo, cuando se añade al DOM o cuando la función display-valor de none En este artículo se explica cómo solucionar este problema con las nuevas funciones CSS como calc-size(), interpolate-size, @starting-style y transition-behavior se puede dominar.
Solución con calc-size()
Si tiene un elemento DOM que parte de un estado cerrado (height: 0) a un estado abierto (height: auto), la animación no suele ejecutarse, aunque la función transition-Esto se debe a que los navegadores no establecen transiciones a variables intrínsecas como auto El nuevo calc-size()-permite calcular estas variables intrínsecas y, por tanto, también las transiciones:
f95f6dcb193aa903adc84ce47bc4a296
En calc-size()-todavía no está disponible en todos los navegadores, por lo que se puede conservar la función original height: auto-declaración.
Solución con interpolate-size
En interpolate-size-permite definir el comportamiento de interpolación de los navegadores y decidir si deben utilizarse entre palabras clave como auto Por defecto, la interpolación sólo tiene lugar entre valores numéricos. allow-keywords sin embargo, puede activar transiciones entre palabras clave:
f95f6dcb193aa903adc84ce47bc4a296
Por interpolate-size: allow-keywords a la :root-se activa el nuevo comportamiento para toda la página.
Transición de display:none
Otro problema se produce cuando un elemento de display:none a un estado visible. display no es una propiedad animable, no hay animación. Las nuevas funciones CSS ayudan en este caso @starting-style y transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Con transition-behavior: allow-discrete garantiza que la animación se ejecute antes que el display-valor de block en none Estas reglas permiten ejecutar transiciones incluso durante una actualización inicial del estilo. @starting-style-garantiza que la animación se ejecute correctamente durante la primera actualización del estilo.
Compatibilidad con navegadores
Las nuevas propiedades se están calc-size() y interpolate-size aún no son compatibles con todos los navegadores. En Chrome están disponibles tras una bandera de experimento, pero aún no en Safari y Firefox. Compatibilidad con transition-behavior en Chrome y Edge, pero no en Safari y Firefox, lo que esperemos que cambie en el futuro.