Quelque chose d'aussi simple devrait être facilement accompli, mais je m'arrache les cheveux en raison de sa complexité.
Tout ce que je veux faire, c'est animer le montage et le démontage d'un composant React, c'est tout. Voici ce que j'ai essayé jusqu'à présent et pourquoi chaque solution ne fonctionnera pas:
ReactCSSTransitionGroup
- Je n'utilise pas du tout de classes CSS, ce sont tous des styles JS, donc cela ne fonctionnera pas.ReactTransitionGroup
- Cette API de niveau inférieur est excellente, mais elle vous oblige à utiliser un rappel lorsque l'animation est terminée, donc l'utilisation de transitions CSS ne fonctionnera pas ici. Il existe toujours des bibliothèques d'animations, ce qui conduit au point suivant:- GreenSock - La licence est trop restrictive pour une utilisation professionnelle de l'OMI.
- React Motion - Cela semble génial, mais
TransitionMotion
est extrêmement déroutant et trop compliqué pour ce dont j'ai besoin. - Bien sûr, je peux juste faire de la supercherie comme le fait Material UI, où les éléments sont rendus mais restent cachés (
left: -10000px
) mais je préfère ne pas suivre cette voie. Je considère que c'est piraté, et je veux que mes composants se démontent pour qu'ils nettoient et n'encombrent pas le DOM.
Je veux quelque chose de facile à mettre en œuvre. Au montage, animez un ensemble de styles; au démontage, animez le même (ou un autre) ensemble de styles. Terminé. Il doit également être performant sur plusieurs plates-formes.
J'ai heurté un mur de briques ici. Si quelque chose me manque et qu'il existe un moyen simple de le faire, faites-le moi savoir.