Transiciones CSS con cambios de estado de React

Una transition de CSS interpola suavemente una propiedad entre dos valores a lo largo del tiempo, en lugar de cambiarla bruscamente. Se declara en el elemento mediante transition: property duration timing-function delay.

En React, normalmente no se animan manualmente los valores en línea. En su lugar, se alterna una clase o un estilo mediante el estado y CSS gestiona los fotogramas intermedios.

El patrón habitual consiste en mantener un booleano en useState y cambiar una clase de CSS cuando su valor cambia. Cuando cambia la clase, la propiedad objetivo obtiene un valor nuevo y CSS anima la diferencia.

Por ejemplo, isOpen determina si el elemento tiene la clase open, y la clase open establece una altura o un transform diferente.

Una configuración habitual es const [isVisible, setIsVisible] = useState(false). Un botón llama a setIsVisible(v => !v) para invertir su valor.

Usar el actualizador funcional v => !v evita estados obsoletos cuando se ponen varias actualizaciones en cola, lo que mantiene fiable la alternancia.

Puede construir className dinámicamente: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. La clase base contiene la declaración de transición y las clases modificadoras contienen los valores inicial y final.

Mantener transition en la clase base, que siempre está presente, hace que la animación funcione en ambas direcciones, al abrir y al cerrar.

Puede animar varias propiedades a la vez enumerándolas: transition: transform 300ms ease, opacity 300ms ease. Un efecto de desvanecimiento y desplazamiento combina un cambio de opacity con un translateY en transform.

Animar ambas propiedades a la vez produce una entrada cuidada, en la que el elemento se desliza hacia arriba mientras aparece gradualmente.

transition-delay retrasa el inicio de una transición. Al asignar retrasos crecientes a los elementos de una lista, crea una cascada escalonada en la que cada elemento se anima ligeramente después del anterior.

En React puede calcular el retraso en línea, por ejemplo: style={{ transitionDelay: index * 50 + 'ms' }}.

La propiedad display no se puede animar porque no tiene valores intermedios entre none y block. Transicionarla produce un cambio instantáneo, no un desvanecimiento.

En su lugar, anime opacity para crear el desvanecimiento visual y alterne pointer-events: none para que el elemento oculto ignore los clics mientras no sea visible.

La función de temporización determina cómo cambia la velocidad durante la duración. linear se mueve a velocidad constante, ease empieza y termina lentamente, y cubic-bezier(...) permite definir una curva completamente personalizada.

Las curvas personalizadas son ideales para conseguir efectos rápidos o elásticos; por ejemplo, cubic-bezier(0.34, 1.56, 0.64, 1) produce una ligera sobreoscilación.

Puede guardar las duraciones en propiedades personalizadas de CSS como --speed: 300ms y reutilizarlas: transition: opacity var(--speed) ease. Esto mantiene la temporización coherente entre los componentes.

Incluso React puede establecer la variable en línea mediante style={{ '--speed': '500ms' }}, lo que permite que las props controlen la temporización de la animación.

Los navegadores pueden animar transform y opacity en el compositor de la GPU sin recalcular el diseño ni volver a pintar. Animar propiedades como width, top o margin obliga a realizar trabajo de diseño en cada fotograma y puede provocar tirones.

Cuando necesite mover, escalar o rotar, utilice transform; cuando necesite crear un desvanecimiento, utilice opacity.

Una transición fiable en React combina un estado booleano, una clase modificadora condicional y una clase base que declara transition para propiedades adecuadas para la GPU. El estado cambia la clase y CSS se encarga de la animación.

Esto mantiene sus componentes declarativos y aprovecha el navegador para producir un movimiento fluido.

Compruebe su comprensión de las animaciones eficientes.

Ha aprendido a activar transiciones de CSS alternando clases controladas por el estado, a animar transform y opacity conjuntamente, a crear efectos escalonados con retrasos y a evitar las transiciones de display usando opacity junto con pointer-events.

También ha visto las funciones de temporización, las duraciones mediante variables CSS y por qué las propiedades compuestas por la GPU mantienen la fluidez del movimiento.