title: What is the correct way to animate/transition between routes in react router
body: <p>I was trying to find documentation for animating between routes in react-router. </p>
  
  <p>I see the following <a href="https://github.com/rackt/react-router/issues/17" rel="noreferrer">issue</a> has some discussion on it. Near the end of the comments, I see lulridge gave a pretty nice <a href="http://codepen.io/luisrudge/pen/QbEeOR" rel="noreferrer">example</a></p>
  
  <p>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? </p>
  
  <p><strong>Note:</strong> It does seem to <i>sort of</i> work for me, but the smoothness of the transition seems to depend on how much data is loaded between each route.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// 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')
  
  &lt;TransitionGroup component="div" transitionName="page-transition"&gt;
    &lt;RouteHandler {...this.props} /&gt;
  &lt;/TransitionGroup&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>