Animaciones de entrada y salida sin una biblioteca

Cuando renderiza condicionalmente con {show && }, React elimina el elemento del DOM en el instante en que show pasa a ser false. No hay tiempo para una animación de salida porque el nodo ya ha desaparecido.

Las animaciones de entrada son fáciles; las de salida son el verdadero desafío.

La solución más sencilla es no desmontarlo nunca. Mantenga el elemento renderizado y anime opacity hasta cero, además de aplicar pointer-events: none, cuando esté oculto; cuando se muestre, vuelva a establecerla en uno.

Esto permite desvanecimientos suaves en ambas direcciones, a costa de que el elemento permanezca en el DOM.

Para desmontarlo realmente, modele una pequeña máquina de estados con fases como mounting, mounted, unmounting y unmounted. Elimine el nodo únicamente cuando haya terminado la animación de salida.

El estado determina qué clases de animación se aplican en cada fase.

Puede encapsular la máquina en un hook personalizado, normalmente llamado useMount. Este recibe la visibilidad deseada y devuelve si el elemento debe estar en el DOM, además de su fase actual.

Los componentes se mantienen limpios porque la lógica de temporización vive en el hook reutilizable.

Siguiendo convenciones habituales, aplique enter y después enter-active al montar, y exit y después exit-active al eliminar. La clase base establece el estado inicial y la clase activa establece el estado final junto con una transición.

Alternar entre ambas en el fotograma correcto produce la animación.

Para saber cuándo termina una animación de salida, escuche el evento transitionend en el elemento. Cuando se active para la salida, cambie el estado a unmounted y elimine el nodo.

Esto vincula el desmontaje exactamente al final de la animación visual, en lugar de basarlo en un tiempo de espera estimado.

Puede encapsular todo esto en un componente Transition que acepte una prop in y elementos hijos. Mantiene los elementos hijos montados durante su animación de salida y aplica las clases adecuadas en cada fase.

Los consumidores solo tienen que cambiar in para obtener correctamente, sin esfuerzo adicional, las animaciones de entrada y salida.

Un detalle sutil: debe permitir que el navegador pinte la clase inicial antes de añadir la clase activa; de lo contrario, el elemento salta sin transición. Un requestAnimationFrame o un reflujo forzado entre ambas garantiza que la transición se ejecute realmente.

Esto garantiza que el navegador registre primero los valores iniciales.

La biblioteca react-transition-group proporciona los componentes Transition y CSSTransition, que implementan exactamente este patrón, incluido el ciclo de vida de las clases y la temporización del desmontaje.

Su versión manual refleja las ideas principales de la biblioteca, lo que facilita comprenderla una vez que haya creado una versión por su cuenta.

Para un único desvanecimiento sencillo, el enfoque de mantener el elemento montado o un hook pequeño suele ser suficiente y evita añadir una dependencia. Para muchas transiciones coordinadas, listas con elementos que se añaden y eliminan, o secuencias complejas, una biblioteca ahorra tiempo y errores en casos límite.

Elija en función de la complejidad de animación que realmente necesite su aplicación.

Las animaciones de salida requieren mantener vivo el elemento hasta que termine su animación, ya sea no desmontándolo nunca, mediante una máquina de estados junto con transitionend o usando una biblioteca.

Comprender estos mecanismos le permite elegir el enfoque más sencillo que satisfaga sus necesidades.

Compruebe su comprensión de las animaciones de salida.

Aprendió por qué las animaciones de salida son difíciles, dos soluciones —mantener el elemento montado y usar una máquina de estados de montaje—, cómo transitionend sincroniza el desmontaje y cómo crear un componente Transition reutilizable.

También vio cuándo recurrir a react-transition-group en lugar de hacerlo a mano.