Algo así de simple debería lograrse fácilmente, sin embargo, me estoy tirando de los pelos por lo complicado que es.
Todo lo que quiero hacer es animar el montaje y desmontaje de un componente React, eso es todo. Esto es lo que he probado hasta ahora y por qué cada solución no funciona:
ReactCSSTransitionGroup
- No estoy usando clases CSS en absoluto, son todos estilos JS, por lo que esto no funcionará.ReactTransitionGroup
- Esta API de nivel inferior es excelente, pero requiere que uses una devolución de llamada cuando la animación esté completa, por lo que solo usar transiciones CSS no funcionará aquí. Siempre hay bibliotecas de animación, lo que lleva al siguiente punto:- GreenSock: la licencia es demasiado restrictiva para el uso comercial, en mi opinión.
- React Motion: esto parece genial, pero
TransitionMotion
es extremadamente confuso y demasiado complicado para lo que necesito. - Por supuesto, puedo hacer trucos como lo hace Material UI, donde los elementos se representan pero permanecen ocultos (
left: -10000px
) pero prefiero no seguir ese camino. Lo considero hacky y quiero que mis componentes se desmonten para que se limpien y no abarroten el DOM.
Quiero algo que sea fácil de implementar. En el monte, anime un conjunto de estilos; al desmontar, anime el mismo (u otro) conjunto de estilos. Hecho. También tiene que ser de alto rendimiento en múltiples plataformas.
He chocado contra una pared de ladrillos aquí. Si me falta algo y hay una manera fácil de hacerlo, avíseme.