He creado un componente modal/diálogo usando React y Tailwind . Aquí hay un codesandbox con mi problema .
Ahora me gustaría mostrar y ocultar el modal con una buena animación como esta aquí .
Intenté crear esto usando el paquete react-transition-group .
Mi problema
Actualmente solo he logrado que funcione al entering al dom PERO eso es mientras envolvía todo el componente Confirm.jsx . Esto no es ideal porque eso significaría que cada vez que quiero usar Confirm.jsx en algún lugar de mi aplicación, también tengo que envolverlo con el componente <CSSTransition> .
Entonces, idealmente, quiero agregar el componente <CSSTransition> ya sea en Confirm.jsx o Dialog.jsx pero intente lo que intente, no puedo hacer que funcionen.
¿Que me estoy perdiendo aqui?
Aquí está el pequeño cambio que he hecho.
Moví CSSTransition a su componente Confirm y eliminé los primeros retornos en Confirm y Dialog cuando el estado open es false
No devolvía nada cuando el estado open se establece en nulo. Esto estaba cancelando tu animación de salida. CSSTransition debe tener algo que representar para que pueda agregar clases de animación de salida al salir. Una vez completada la animación, CSSTransition elimina el childtren del DOM, ya que ya configuró la propiedad unmountOnExit