This router is based on my react-router-transition-example. This router is mainly focussed on page transition although they are optional. The transition also respect
var React = ;var lane = ;var Page1 = React;var Page2 = ...var Page3 = ...var routes ='/' Page1 'none''/page2' Page2 'overlay''/page3' Page3 'slidein';React;
A route is an array with 2 or 3 elements.
Instead of having one transition for each new url/page this router generates a
transitionName based on the previous and current page. So you use classes that describe going from one transition to an other. You can compare it to a finite state machine going from one state to an other and an event that gets fired depending on the previous and new state.
If we take the example from above and you visit
/ you go from transition name
'none'. The router will generate the
transitionName: '.none'. Next it will check if
'.none-enter' is defined in css. If it's not it will set
transitionEnter: false same happens for
CSSTransitionGroup could have the following props:
transitionName: '.none'transitionEnter: true/false // depending if you defined .none-entertransitionLeave: true/false // depending if you defined .none-leave
If you go from
transitionName: '.none-overlay' is used:
transitionName: '.none-overlay'transitionEnter: true/false // depending if you defined .none-overlay-entertransitionLeave: true/false // depending if you defined .none-overlay-leave
The css for going from none -> overlay and overlay -> none could be the following:
@-100%}@-}/* none -> overlay *//* old component *//* new component *//* overlay -> none *//* old component *//* new component */
You might notice that the
none animation goes from
opacity: 1 to
opacity: 1. That because
CSSTransitionGroup destroys the old component after transitionend or animationend event so we need to provide an animation that triggers it.