conditional react router animation implementation with quick hack snippets

app-n-routes.js

export default class App extends Component {
  render = () => {
    const { pathname } = this.props.location
    const root = pathname === '/'
    return (
      <div>
        <li><Link to="/one">One</Link></li>
        <li><Link to="/two">Two</Link></li>
        <ReactCSSTransitionGroup component="div" transitionName={ root ? forward : reverse } >
          { React.cloneElement(this.props.children || <div />, { key: pathname }) }
        </ReactCSSTransitionGroup>
      </div>
    )
  }
}

// routes
const routes = <Route path="/" component={ App }>
  <IndexRoute component={ Home } />
  <Route path="/one" component={ One } />
  <Route path="/two" component={ Two } />
</Route>

app.styl

.forward-enter.backward-enter
  transition-duration .3s
  transition-property transform opacity
  transition-timing-function ease-out
  z-index 10000

.forward-enter
  transform translate3d(100%,0,0)

.backward-enter
  transform translate3d(-100%,0,0)

.forward-enter.forward-enter-active.backward-enter.backward-enter-active
  transform translate3d(0,0,0)

.forward-leave.backward-leave
  transition-duration .3s
  transition-property transform, opacity
  transition-timing-function ease-out
  transform translate3d(0,0,0)
  opacity 1

.forward-leave.forward-leave-active.backward-leave.backward-leave-active
  tranform translate3d(0,-15%,0)
  opacity 0.3