Transition between Pages with React Transition Group and React Router
It’s possible to use React Transition Group for transitions between pages. This can be a clever and useful boost to overall user experience in your app. In this lesson, we’re going to transition between pages using React Transition Group and React Router 4.
Instructor: [00:00] In this example, we have a button which when clicked, toggles the appearance of this menu. This menu is transitioned in and out of the DOM using CSS transition from ReactTransitionGroup.
[00:16] Currently, these list items don't lead anywhere, so what we're going to do is at routing using React Router, and we're going to transition the pages when they change using ReactTransitionGroup. Each page will gradually transition into the next one.
[00:34] Let's get started by adding routing. Let's head to the top of the file. We're going to add browser router as router. Route, switch, and link from React Router DOM.
[00:49] Now, let's write a router component which is going to link to our app component. Let's call it base. It's going to return a router component which contains a route component which links to the app component. Of course, we'll need to export that component instead of the app component.
[01:13] Underneath our button, we're going to write the main content to the page. We're going to write a div with the class name of swipe container. It's going to contain a switch component from React Router, and the switch component is going to contain three routes, one leading to home, one leading to profile, and one leading to favorites, and they each have appropriate paths.
[01:39] We haven't imported these components yet. Let's head back to the top and import those now. Each of those components is a stateless component which is going to render some paragraphs of text. Let's save now and refresh. Now, we get the home component, because we're on the home route.
[02:03] Now, let's replace these list items with some links from React Router. These will correspond to the routes that we just set up. When we save and refresh, we'll have some links inside our menu. When we navigate to them, we get the appropriate component and the appropriate route.
[02:33] The menu doesn't close when we change the route. Let's fix that now. We're going to write a class method. Component will receive props which takes next props, and it's going to hide the menu on any route change. We're going to check next props.location against the current prop's location, and if the difference, we're going to set some state to hide the balloon menu.
[02:57] Let's check that now. Now, the menu closes whenever the route changes. Now that we've added routing to our small app, let's transition between pages. To do this, we need to make use of CSS transition from ReactTransitionGroup, but also the transition group component.
[03:17] The transition group component takes multiple CSS transitions as its children, which is the situation that we have in this case, because there are actually going to be two routes on the same page at once, when they transition. As one leaves gradually, the next one will enter gradually. Let's head back down to our swipe container that we just wrote.
[03:41] I'm going to wrap it in a transition group component. As the first child of the transition group, we're going to write a CSS transition component. The key is going to be React Routers location.key, and that comes from this.props. Let's destructure that at the top of the render method.
[04:03] We're going to pass a class name of swipe which will generate the class names that we need for the transition. We'll need this for our CSS, and we'll add a timeout of 500 milliseconds. It's going to take half a second to leave and half a second to enter. This is going to wrap the entire swipe container div.
[04:28] Let's see how that affects our app. Now when we change pages, we can see the previous one stays there for short time. Let's slow this right down and inspect the DOM. If you increase the timeout to five seconds, now when we change route, we can actually see two components both with the class swipe container.
[05:03] One is taking five seconds to leave, and one is taking five seconds to enter. Let's take the time about to half a second. What we're going to do is transition the leaving component to slideDown and fadeOut and the entering component is going to slideIn and fadeIn. Let's head over to our CSS to rights and transitions. We'll head towards the bottom of the file.
[05:31] The first thing we're going to do is make the swipe container position absolute, so that the components leaving and entering are not statically positioned. Next, we can write some transitions for the swipe class name. We'll have swipe-enter, swipe-enter-active, swipe-exit, and swipe-exit-active.
[05:58] We're going to fade and slide the component in, and fade and slide it out. We're going to start and end with an opacity of zero. I'm going to transition to an opacity of one. We're going to start with transform translateY(-100%) and it's going to go to zero percent on enter-active.
[06:24] When we begin to leave, we're also going to begin from zero percent. I'm going to transform, translateY(100%) as suppose to (-100%). On the active class names, we can apply a transition, and we're going to apply all 500 milliseconds, which is the time out that we supplied in the JavaScript.
[06:50] Now, let's save and refresh. When we switch between routes, the leaving components slides and fades out, and the arriving components slides and fades in.