Comment faire glisser vers le bas un composant sans état dans React JS à l'aide de ReactCSStransitionGroup ou ReactTransitionGroup?

Je souhaite faire glisser un composant sans état, qui sera initialement défini sur display:none, pour être visible après un changement d'état dans l'un de ses composants parents, comme s'il était déplacé vers le bas comme une liste déroulante. Je suis nouveau à la partie animation, j'essayais this_link.Comment faire glisser vers le bas un composant sans état dans React JS à l'aide de ReactCSStransitionGroup ou ReactTransitionGroup?

Jusqu'à présent ce que j'ai essayé dans Sandbox (https://codesandbox.io/s/0xrjp051pp).

Quelqu'un peut-il aider à ce sujet?

Source

2017-10-09 SsNewbie

Voici le bac à sable modifié avec le travail de transition. https://codesandbox.io/s/nrz8vlmrrl La seule chose que vous devez corriger est le code CSS pour le faire fonctionner.

Les modifications que j'ai apportées sont les suivantes.

Modification de la classe de transition en CSS pour afficher le composant. Il avait affichage: aucun précédemment.
Afficher et masquer le composant en fonction de l'accessoire que vous transmettiez mais que vous n'utilisez pas dans votre composant SubComponent.

Source

2017-10-09 17:55:18 palsrealm

Ceci fonctionne comme normal 'display: block' et' display: none'. Je veux que le composant glisse et s'affiche. Tout comme une liste déroulante glisse lentement. Essayé avec @keyframes css, mais son ne fonctionne pas. – SsNewbie

Comment faire glisser vers le bas un composant sans état dans React JS à l'aide de ReactCSStransitionGroup ou ReactTransitionGroup?

Répondre

Questions connexes