Ich habe versucht, eine Dokumentation für die Animation zwischen Routen im React-Router zu finden.
Ich sehe das folgende Problem hat einige Diskussionen darüber. Gegen Ende der Kommentare sehe ich, dass Lulridge ein ziemlich schönes Beispiel
gegeben hatAlso ... ist dieses Beispiel die richtige / empfohlene Möglichkeit, zwischen Routen im Reag-Router zu animieren? Wird dies zu einem Übergang zwischen den Routen führen, unabhängig davon, welcher Inhalt in der Route angezeigt wird, Bilder, Text?
Hinweis: Es scheint mir irgendwie zu funktionieren, aber die Sanftheit des Übergangs scheint davon abhängig zu sein, wie viel Daten zwischen den einzelnen Routen geladen werden.
JS
%Vor%CSS
%Vor%Für jeden, der später darauf kommt, gibt es jetzt eine Dokumentation für die Animation auf der React GitHub-Dokumentation unter den Add Ons / Animationsabschnitt .
Der Code in der ursprünglichen Frage ist fast identisch mit dem in der Dokumentation, mit der Ausnahme, dass das Beispiel aus der Dokumentation (unten) auch Übergangszeitüberschreitungen enthält, was empfohlen wird.
%Vor%
Für Informationen die Eigenschaften transitionEnterTimeout und transitionLeaveTimeout in React 0.14 angekommen sind, gibt es eine kleine Menge mehr über sie in der 0.14 Release Notes :
Add-Ons: Um die Zuverlässigkeit zu verbessern, wird 'CSSTransitionGroup' nicht mehr ausgeführt höre auf Übergangsereignisse. Stattdessen sollten Sie den Übergang angeben Dauern manuell verwenden Requisiten wie 'transitionEnterTimeout = {500}'.
Tags und Links javascript reactjs react-router