Ich habe eine ReactCSSTransitionGroup, die ich mit CSS-Modulen verwende (und dynamisches Routing von react-router, aber ich glaube, das funktioniert wie erwartet).ReactCSSTransitionGroup mit CSS-Modulen
<ReactCSSTransitionGroup
component="div"
transitionName={transitions}
transitionAppear
transitionAppearTimeout={1000}
transitionEnterTimeout={2000}
transitionLeaveTimeout={2000}
>
{React.cloneElement(this.props.children, {
key: location.pathname,
})}
</ReactCSSTransitionGroup>
Die appear und leave Übergänge perfekt funktionieren - aber die enter Übergänge nicht - sie einfach erscheinen sofort, mit der vorherige Komponente ausgeblendet, nachdem die neue Komponente eingegeben hat.
Die CSS (mit CSS-Module):
.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 ---
ich entdeckt, dass es auf Kinder Routen wie erwartet funktioniert (ich habe nur eine kleine Handvoll die in meiner App). Alle Routen einschließlich untergeordneter Routen werden dynamisch geladen. Daher bin ich mir immer noch nicht sicher, was bewirkt, dass es in diesen Fällen funktioniert, in anderen nicht.
hier, um diese Geige versuchen, änderte es die Zeit von .enter.enteractive bis 2000 https: //jsfiddle.net/dcfsyre2/ Könnten Sie mir das Problem erklären? Oder könnten Sie eine Geige postulieren und das Problem erklären –
Ich bezweifle, dass es wegen der Stelle ist, wo Sie Ihre CSS-Stile importieren. Versuchen Sie, Ihre CSS-Dateien in einem Root-Modul zu importieren, damit sie so früh wie möglich wirksam wird. –