Activating Routing Routes
Lately I've been using ReactCSSTransitions
one side to "slide" a new page. This works great, except, of course, when it was implemented, the previous page will be blank. I need the previous page to remain rendered until my new page is animated to the side of the switch routes.
What would be the correct way to implement this? Do I need to force the HTML page to compile and drag it along with the new one and save it when I click back?
source to share
Rather than doing it manually with the transition group, I would recommend using react-router-transition instead .
You will need to do something like this in your top 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 check the demo here . If you are working with react-router v4 they already talk about the current solution to the problem .
source to share