I was trying to find documentation for animating between routes in react-router.

I see the following issue has some discussion on it. Near the end of the comments, I see lulridge gave a pretty nice example

So... is this example the correct/recommended way to animate between routes in react router? Will this cause a transition between routes no matter what content is displayed in the route, images, text?

Note: It does seem to sort of work for me, but the smoothness of the transition seems to depend on how much data is loaded between each 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;
}

I was trying to find documentation for animating between routes in react-router.

I see the following issue has some discussion on it. Near the end of the comments, I see lulridge gave a pretty nice example

So... is this example the correct/recommended way to animate between routes in react router? Will this cause a transition between routes no matter what content is displayed in the route, images, text?

Note: It does seem to sort of work for me, but the smoothness of the transition seems to depend on how much data is loaded between each 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;
}

• javascript
• reactjs
• react-router

3 Answers 3

To anyone coming to this later, there is now documentation for animation on the React github documentation under the Add Ons/Animation section.

The code in the original question is almost identical to that in the documentation, with the exception that the example from the documentation (below) also includes transition timeouts, which is recommended.

    <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
      {items}
    </ReactCSSTransitionGroup>

For info the transitionEnterTimeout and transitionLeaveTimeout properties arrived in React 0.14, there's a small amount more about them in the 0.14 Release Notes:

Add-Ons: To improve reliability, 'CSSTransitionGroup' will no longer listen to transition events. Instead, you should specify transition durations manually using props such as 'transitionEnterTimeout={500}'.

Yes, you're doing it the right way. Just be sure to specify a unique key attribute on the <RouteHandler/> component. The route name is generally a good option.

With the introduction of React Router v4, this has got a lot easier. We can now transition within RRv4 using HOC.

I have a vid and code over at github/youtube.

https://www.youtube.com/watch?v=MiOqASZnKqA

https://github.com/gpltaylor/react-router-workshop/

I hope this is useful to you. @gpltaylor