Algo tão simples deve ser facilmente realizado, mas estou puxando meu cabelo por causa do quão complicado é.
Tudo que eu quero fazer é animar a montagem e desmontagem de um componente React, é isso. Aqui está o que tentei até agora e por que cada solução não funciona:
ReactCSSTransitionGroup
- Não estou usando classes CSS, são todos estilos JS, então isso não funcionará.ReactTransitionGroup
- Esta API de nível inferior é ótima, mas requer que você use um retorno de chamada quando a animação estiver concluída, então apenas usar transições CSS não funcionará aqui. Sempre existem bibliotecas de animação, o que nos leva ao próximo ponto:- GreenSock - O licenciamento é muito restritivo para uso comercial IMO.
- React Motion - Parece ótimo, mas
TransitionMotion
é extremamente confuso e complicado demais para o que preciso. - Claro que posso fazer truques como o Material UI faz, em que os elementos são renderizados, mas permanecem ocultos (
left: -10000px
), mas prefiro não seguir esse caminho. Eu considero isso hacky e quero que meus componentes sejam desmontados para que sejam limpos e não atrapalhem o DOM.
Eu quero algo que seja fácil de implementar. Na montagem, anime um conjunto de estilos; ao desmontar, anime o mesmo (ou outro) conjunto de estilos. Feito. Também deve ser de alto desempenho em várias plataformas.
Eu bati em uma parede de tijolos aqui. Se estiver faltando alguma coisa e houver uma maneira fácil de fazer isso, me avise.