3

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"?

4

1 回答 1

2

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.

于 2017-04-29T16:09:27.703 回答