Switching routes animation

Question

Recently, I've used ReactCSSTransitions to "slide" the new page from one side. This works fine except, of course, the moment it's implemented now the previous page will be blank. I need for the previous page to remain rendered until my new page is animated from the side from switching routes.

Which would be the correct way to implement this? Do I need to forcibly gather an HTML page and drag it alongside the new one and save it for when I press "Go back"?

which `react-router` version? – Fazal Rasel Apr 29 '17 at 15:43 — Fazal Rasel, Apr 29 '17 at 15:43

score 2 · Accepted Answer · answered Apr 29 '17 at 16:09

Rather than doing it manually with the transition group, I would recommend using react-router-transition instead.

You would have to do something like this in your top love root app component:

import { RouteTransition } from 'react-router-transition'

<RouteTransition
  pathname={this.props.location.pathname}
  atEnter={{ translateX: 100 }}
  atLeave={{ translateX: -100 }}
  atActive={{ translateX: 0 }}
  mapStyles={styles => ({ transform: `translateX(${styles.translateX}%)` 
})}>
  {this.props.children}
</RouteTransition>

it uses react-motion under the hood, and the result is pretty nice. You can checkout the demos here. If working with react-router v4, there's already people talking about current solution in this issue thread.

Switching routes animation

1 Answers1