A menudo, será necesario animar un componente de React cuando se supone que debe estar a la vista. Piense en un filtro o búsqueda modal, emergente o móvil que aparece cuando se hace clic en un botón.

Digamos que queremos desvanecer el filtro/modal/pantalla a la vista. Tenemos dos opciones

Renderice el componente pero ocúltelo con opacidad hasta que se abra:

 <MyComponent style={{opacity: isOpen ? '1' : '0'}}/>

• Pros: podemos hacer un fundido de entrada y de salida, porque el componente siempre está ahí. simplemente cambie la opacidad y agregue transition css.

• Contras: se renderiza el componente de reacción. Esto no puede ser bueno para el rendimiento, ¿verdad? ¿Correcto?

Renderice el componente solo cuando esté abierto pero use animaciones css

 {isOpen && <MyComponent />}

css para el componente anterior

 animation-duration: 300ms; animation-name: fadeIn; @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

• Pros: esto tiene que ser mejor para el rendimiento, ¿verdad? ¿Correcto?
• Contras: desvanecerse es difícil. Requiere demora para eliminarlo del DOM. ya que no puede hacer la transición de un desvanecimiento al eliminar un componente del DOM.