title: page sliding animation with React Router v4 and react-transition-group v2
body: <p>I'm using React Router v4 and react-transition-group v2 to test the page sliding animation.</p>
  
  <pre><code>const RouterMap = () =&gt; (
    &lt;Router&gt;
      &lt;Route render={({ location }) =&gt;
        &lt;TransitionGroup&gt;
          &lt;CSSTransition key={location.pathname.split('/')[1]} timeout={500} classNames="pageSlider" mountOnEnter={true} unmountOnExit={true}&gt;
            &lt;Switch location={location}&gt;
              &lt;Route path="/" exact component={ Index } /&gt;
              &lt;Route path="/comments" component={ Comments } /&gt;
              &lt;Route path="/opinions" component={ Opinions } /&gt;
              &lt;Route path="/games" component={ Games } /&gt;
            &lt;/Switch&gt;
          &lt;/CSSTransition&gt;
        &lt;/TransitionGroup&gt;
      } /&gt;
    &lt;/Router&gt;
  )
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.pageSlider-enter {
    transform: translate3d(100%, 0, 0);
  }
  
  .pageSlider-enter.pageSlider-enter-active {
    transform: translate3d(0, 0, 0);
    transition: all 600ms;
  }
  .pageSlider-exit {
    transform: translate3d(0, 0, 0);
  }
  
  .pageSlider-exit.pageSlider-exit-active {
    transform: translate3d(-100%, 0, 0);
    transition: all 600ms;
  }
  </code></pre>
  
  <p>The animation is as bellow:</p>
  
  <p><a href="https://i.stack.imgur.com/0IK1W.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/0IK1W.gif" alt="enter image description here"></a></p>
  
  <p>As you see, the animation that <code>index page</code> slide to the <code>detail page</code> is all right(right to left). But when I click the <code>Back</code> icon, I hope <code>index page</code> comes out from left to right.</p>
  
  <p>I know if I change the CSS as bellow, the page will come out from left to right:</p>
  
  <pre><code>.pageSlider-enter {
    transform: translate3d(-100%, 0, 0);
  }
  .pageSlider-exit.pageSlider-exit-active {
    transform: translate3d(100%, 0, 0);
    transition: all 600ms;
  }
  </code></pre>
  
  <p>But how combine the two animations together? Generally speaking, whenever user clicks the back icon, the animation should be <code>from left to right</code>.</p>
  
  <hr>
  
  <p>Update: 2017.08.31</p>
  
  <p>Thanks for @MatijaG, using the path depth is really an awesome idea. I followed it and got a new problem.</p>
  
  <pre><code>function getPathDepth(location) {
    let pathArr = (location || {}).pathname.split('/');
    pathArr = pathArr.filter(n =&gt; n !== '');
    return pathArr.length;
  }
  
  &lt;Route render={({ location }) =&gt;
    &lt;TransitionGroup&gt;
      &lt;CSSTransition
        key={location.pathname.split('/')[1]}
        timeout={500}
        classNames={ getPathDepth(location) - this.state.prevDepth &gt; 0 ? 'pageSliderLeft' : 'pageSliderRight' }
        mountOnEnter={true}
        unmountOnExit={true}
      &gt;
        &lt;Switch location={location}&gt;
          &lt;Route path="/" exact component={ Index } /&gt;
          &lt;Route path="/comments" component={ Comments } /&gt;
          &lt;Route path="/opinions" component={ Opinions } /&gt;
          &lt;Route path="/games/lol" component={ LOL } /&gt; // add a new route
          &lt;Route path="/games" component={ Games } /&gt;
        &lt;/Switch&gt;
      &lt;/CSSTransition&gt;
    &lt;/TransitionGroup&gt;
  } /&gt;
  </code></pre>
  
  <p>And updated CSS:</p>
  
  <pre><code>.pageSliderLeft-enter {
    transform: translate3d(100%, 0, 0);
  }
  .pageSliderLeft-enter.pageSliderLeft-enter-active {
    transform: translate3d(0, 0, 0);
    transition: all 600ms;
  }
  .pageSliderLeft-exit {
    transform: translate3d(0, 0, 0);
  }
  .pageSliderLeft-exit.pageSliderLeft-exit-active {
    transform: translate3d(100%, 0, 0);
    transition: all 600ms;
  }
  
  .pageSliderRight-enter {
    transform: translate3d(-100%, 0, 0);
  }
  .pageSliderRight-enter.pageSliderRight-enter-active {
    transform: translate3d(0, 0, 0);
    transition: all 600ms;
  }
  .pageSliderRight-exit {
    transform: translate3d(0, 0, 0);
  }
  .pageSliderRight-exit.pageSliderRight-exit-active {
    transform: translate3d(-100%, 0, 0);
    transition: all 600ms;
  }
  </code></pre>
  
  <p>The animation:</p>
  
  <p><a href="https://i.stack.imgur.com/dnELS.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/dnELS.gif" alt="enter image description here"></a></p>
  
  <p>From '/' to '/games' is ok, and from '/games' back to '/' is still ok(type 1: <strong>route A -> route B</strong>, only 2 routes). But if firstly from '/' to '/games', and then from '/games' to '/games/lol', the second phase lose the animation(type 2: <strong>route A -> route B -> route C</strong>, 3 or more routes). We also see that from '/games/lol' back to '/games' and then back to '/', the slide animation is not same as type 1.</p>
  
  <p>Anyone has any idea about this problem?</p>