J'ai un ReactCSSTransitionGroup que j'utilise avec les modules CSS (et le routage dynamique du routeur de réaction mais je crois que cela fonctionne comme prévu).ReactCSSTransitionGroup avec des modules CSS
<ReactCSSTransitionGroup
component="div"
transitionName={transitions}
transitionAppear
transitionAppearTimeout={1000}
transitionEnterTimeout={2000}
transitionLeaveTimeout={2000}
>
{React.cloneElement(this.props.children, {
key: location.pathname,
})}
</ReactCSSTransitionGroup>
Les appear et leave transitions fonctionnent parfaitement - mais les enter transitions ne sont pas - ils apparaissent simplement immédiatement, avec le composant précédent fondu après le nouveau composant est entré.
Le CSS (en utilisant les modules CSS):
.enter {
opacity: 0.01;
}
.enter.enterActive {
opacity: 1;
transition: opacity 500ms ease-in;
}
.leave.leaveActive {
opacity: 0.01;
transition: opacity 2000ms ease-in;
}
.appear {
opacity: 0.1;
transition: opacity 1000ms ease-out;
}
.appearActive {
opacity: 1;
transition: opacity 1000ms ease-out;
}
--- EDIT ---
J'ai découvert que cela fonctionne comme prévu sur les routes de l'enfant (je n'ai qu'une petite poignée de ceux dans mon application). Tous les itinéraires, y compris les routes enfant, sont chargés dynamiquement, donc je ne suis toujours pas sûr de ce qui le fait fonctionner dans ces cas, mais pas dans d'autres.
ici essayer ce violon, je l'ai changé le temps de .enter.enteractive à 2000 https: //jsfiddle.net/dcfsyre2/ alors pourriez-vous expliquer le problème auquel vous faites face? ou pourriez-vous poster un violon et expliquer le problème? –
Je doute que ce soit à cause de l'emplacement où vous importez vos styles CSS. Essayez d'importer vos fichiers CSS dans un module racine pour qu'il soit activé le plus tôt possible. –