title: Animate individual routes with react-router
body: <p>I'm using react-router and I want to be able to render and transition arbitrary components when mounting and unmounting. Right now I have added the components to my route definition:</p>
  
  <pre><code>&lt;Route component={App}&gt;
      &lt;Route
        path="foo"
        component={Foo}
      /&gt;
      &lt;Route
        path="bar"
        component={Bar}
      /&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>I use react css transition group in my components to animate them when they enter and leave. The components mount and animate propery when they are entering. But when I leave the route, the rendered component is immediately removed and there is thus no leave animation.</p>
  
  <p>The typical solution is to add the transition group to the parent so that it isnt unmounted, and from there animate the children. This doesn't work for me because <code>Foo</code> component and <code>Bar</code> component use completely different animations.</p>
  
  <p>In short I believe I need a way to individually animate routes and not the typical "transition between routes". For example, navigating between <code>/</code> and <code>/foo</code> should yield the following:</p>
  
  <ol>
  <li>Be on <code>/</code>, navigate to <code>/foo</code> -> the <code>Foo</code> component animates in.</li>
  <li>Be on <code>/foo</code>, navigate to anywhere else, like <code>/</code> -> the <code>Foo</code> component animates out.</li>
  </ol>
  
  <p>I hope this makes sense, thanks!</p>