Was ist die richtige Art zu animieren/übergangs zwischen Routen im router reagieren

Ich war auf der Suche nach Dokumentation für die Animation zwischen den Routen in reagieren-router.

Sehe ich folgende Problem hat einige Diskussion auf. In der Nähe des Ende der Kommentare, ich sehe lulridge gab eine ziemlich nette Beispiel

So... ist in diesem Beispiel der korrekte/empfohlene Weg, um die Animation zwischen Routen im router reagieren? Wird dadurch ein übergang zwischen Strecken-egal, welche Inhalte angezeigt und in die route, Bilder, Texte?

Hinweis: Es scheint Art Arbeit für mich, aber die Glättung des übergangs scheint davon abhängen, wie viel Daten geladen, die zwischen jeder route.

JS

//the key part in your top level route/component e.g. Layout.js 
//where you wrap the RouteHandler in the TransitionGroup

import React from 'react/addons'
let TransitionGroup = React.addons.CSSTransitionGroup;
let { RouteHandler, Link } = require('react-router')

<TransitionGroup component="div" transitionName="page-transition">
  <RouteHandler {...this.props} />
</TransitionGroup>

CSS

.page-transition-enter {
  -webkit-transition: opacity 0.3s ease-in-out;
          transition: opacity 0.3s ease-in-out;
  opacity: 0;
  position: absolute;
}
.page-transition-enter.page-transition-enter-active {
  opacity: 1;
}
.page-transition-leave {
  -webkit-transition: opacity 0.3s ease-in-out;
          transition: opacity 0.3s ease-in-out;
  opacity: 1;
  position: absolute;
}
.page-transition-leave.page-transition-leave-active {
  opacity: 0;
}

InformationsquelleAutor steven iseki | 2015-06-24