How to create page transitions with React Router

hi there it's been a year again the guy who ate tomorrow's but lost runnin development in today's video you will learn how to transition between two routes using the react transition group but before we do that don't forget to hit the like subscribe to the channel for more videos like this before we get into the code let's review what we will be building I have a simple react application and working I have two routes home and about and inside of an app container I'm rendering I'm switching between two routes okay so they are not animating they are just switching and we only see one at a time and what we want to do what we want to learn in this tutorial is how to animate them so how to fade out firstly the one we currently on and then fade in the one we are clicking into okay so that will be the aim for this tutorial it might take some time because I want to really break it down into the steps and slow it down so you are 100% clear how the react router transitions work and here is the same app with the transition implemented okay so this is the final thing you will know exactly what class is apply when and it will make very very easy for you to take this knowledge and apply to your transitions on your own projects now let's jump into vs code and we'll quickly review what files we'll be working with I've got the simple application running and I've got an app dot J s that renders the switch of react router and then we have two routes and based on the path we either rendering a home or about component these are very simple components with content inside of it wrapped in a div class page and also the about is exactly the same okay so these are very simple components just render in different image and that will be it for these two components as I said the most important part of the code of the switching and animating between the two routes is this switch element this is a very basic implementation of the reactor and I'm assuming that you already know how it works we've got a browser router wrapped around Route inside of the reactant render method so this is where the react router implementation starts then we are rendering the app component and in as you've seen before we have the switch okay so hopefully you are familiar with how react router works and now we'll just get to the animations we will use the react transition group so if you haven't installed it already run this NPM install react transition group safe in my code if I go to vs code package.json i've got it already installed so make sure you've got this in your project all the other dependencies are the default dependencies from react create create react app okay so we will be using the example of the transition group and firstly we'll need to import it okay so at the top of our file we need to import CSS transition and transition group so let's copy this and paste it inside of our Abdo j/s now we can reuse these two components around our switch let's go back to the example of the transition group and we'll scroll down inside of the to-do list these items are fading out or fading in if we create a new one so we will reuse the same concept but obviously with a different animation and we use it for the react router but the main concept stays the same we wrapping everything in a transition group that will just render a simple div with the class we can specify if we don't specify the class name it will be just the empty div or deep without any class on it and then inside of it in this example the rendering loop of items and each item is the CSS transition okay so we want to firstly create a CSS transition and wrap our switch around it so let's copy the CSS transition for now we'll just get rid of the key will keep the timeout 300 milliseconds and we'll keep the class names fade the same and let's don't forget to close it now we have the switch wrapped inside of CSS transition and we will need to also wrap it in the transition group okay so let's go back here simple transition group we don't need any class so let's create transition group and wrap it around the CSS transition now let's save the file and have a look at it in a browser I've got the dev tools open on my right side inside of the console and what we want to look at is all the elements around a switch so if we search for switch and navigate between the two routes we'll see that the route is switching we are showing a different component but none of the switch transition CSS transition or transition groups none of these elements and know that that is happening okay so the only place where it's changing is the match location this one is changing but we are not passing any of these keys inside of this transition group and most importantly the CSS transition okay so what we want to end up with is when we click when we are on a home page and we click on about we want to render two routes at the same time then we will position them absolute so they sit on top of each other and will firstly fade out one fate one out and then fade in the new one okay so this is the concept we will need to get some unique key to both switch statements or switch elements and that will be based on the key of the location okay so how can we get the location how can we pass it into the CSS transition that's what we'll cover next now we can go to vs code and a render empty route and this route will render all the time because we haven't specified any location any path okay so route without specifying a path will render all the time and we want to render this transition group all the time okay so let's move that transition group element inside of empty route now when we navigate between the two routes here is the empty road with no element to render and if we could see the location key is changing so this one starts with zero and and if we go to homepage it changes to 8j five six so we can pass this key inside of the CSS transition element and that will then render two of them at the same time and then we can do the CSS animation back to vs code and inside of the render of the empty route we will this structure we will get just a location and we can use this location and most importantly the location key to create a key on the CSS transition element okay so this will become a location key and now we have a unique identifier for the individual CSS transition groups that should render both transitions or that children the post CSS transition groups when we are switching between the two components okay so let's again go to the switch select it and navigate between the two routes and now you'll see for a millisecond we have two elements to CSS transition elements and that's exactly what we want it now it's just a matter of having the right CSS to position them on top of each other and showing and hiding them using animations okay so we have the rendering done we have two CSS transitions group at a time just for a split of a second for the time out of three hundred milliseconds we have two components visible on the page but because our CSS doesn't position them at the moment on top of each other you will see the flickering and having one at the bottom and one at the top okay so we need to first firstly fix the CSS to make them sit on top of each other and then play with the CSS timing to make the transition perfect let's go back to vs code and inside of the app CSS I have already the page Styles enabled so I'm just removing the comments around it and we are positioning absolute the container top hundred to allow the menu to sit on top of it and then left and right zero to make sure it stretches all the way to the edges of the browser so that is very important that we have the page container position:absolute and now they will post sit on top of each other okay so if I save it we should not see any scroll bars before we saw the two components underneath each other and there was for a millisecond horizontal scroll bar or the vertical scroll bar and now we should not see any scroll bars when we tweaking or when we going between the two routes now there is no vertical scrollbar but we see a little flicker so the transition is not as smooth as we expected okay so let's debug it let's jump back to vs code and we will extend the time out to thirty seconds so thirty thirty thousand milliseconds and we also disable the fading in fading out okay so this was enabled before I'm disabling it and now we are having the time outside to thirty Seconds that should help us debug what's going on and if I click on the home that's when the transition is happening we'll go to the switch statements and we have two of them both of them inside of the related CSS transition but both of them are showing me the home component okay so we have two components of the same route but all we want to do is when we animating out we only want to see the home component in one of the switches the other one should not render the home component okay so that is the program that our switch doesn't know what the location is that will be a quick fix if we set the location on the switch to location now we will only render the component at the right time okay so no more doubling up just passing the location to the switch element will only render the route inside of it at the right time okay so if I save it and view it in a browser we should not see any flickering we should not see any doubling up and we should see the two routes on top of each other one is rendering the home component that we want to fade out and one is rendering the about component that will about to fade in okay so this was the last bit of debugging we had to do and now we can fix and finalize the CSS animation all we have to do in the CSS or in the code will go back to 300 milliseconds for the timeout and we will bring back the CSS for the animation itself we will be fading it in 300 milliseconds and if i refresh the page we should see the animations nicely happening without any flickering one element is fading out and one is fading in now let's talk a little bit about the classes themselves and for that to make it easier I'll just increase the size again of the timeout to three seconds in the CSS as well we bump it up by one zero which will extend the number of seconds the transition is happening and then if I go just to the elements view and click on about you'll see that there are two elements with the extra classes so I will pause it here and we can talk more about how the classes are structured if you've never worked with CSS transition groups now let's break down the classes that are applied to these elements when the animation when the transition is happening the first class fate exit is applied to the element that is transitioning away and that has opacity one and the fade exit active class has the opacity set to zero and also has the transition okay so combination of these two classes removes the element from the view and then at the same time this faith interactive or faith enter class make sure that the element that is coming into a view has opacity set to zero and it's waiting waiting waiting and then the animation to fade it in kicks in through this fate enter active class okay that has a opacity set to one and has the transition on it okay so combination of these classes is what's happening in our example and if you are not familiar how these classes work this is coming from the angular ng animate library and react and react transition group is using the same concept and here are the classes inside of the style sheet you see the fade exit fed exit active we will remove the zeros so we'll go back to 300 milliseconds and the last thing we'll do will fix up the timing so 300 milliseconds plus 150 delay means 450 milliseconds we have to set the duration for the animation to be nice and smooth from start to finish and from both of these elements to be visible on the page for that duration so let's go back to the code change the duration to 450 now when we save both files and go back to the browser we should see the animation nicely working transitioning away and transitioning in okay the transitioning out is intentionally taking less time than the transitioning in but you can play with it set up your own timing now that you understand the classes and let's quickly recap what we've done we're up the switch statement inside of the CSS transition element and transition group and then we've used the empty route to pass the location and set the key on the CSS transition to the location dot key that will generate two CSS transition elements on the page when we are transitioning between the two routes and we using the fayth class to make the transition happening using CSS and we also at the end had to pass in the location to the switch to make sure we only rendering the route inside of that switch that is that should be showing for that location okay so hope this all makes sense I know it was full on but I wanted to cover it in depth step-by-step so hopefully you found it useful and that's it all for today I hope you've enjoyed this react tutorial let me know in the comments have you ever tried to animate between two routes and how did you go about it and don't forget to hit the like subscribe to the channel for more videos like this until next time happy coding [Music]

Channel: Ihatetomatoes

Views: 66,383

Keywords: beginner, css3, es6, front-end, html5, ihatetomatoes, javascript, npm, react, tips, tutorial, vscode, 2018, router, page transition, css transition, page transition effect

Id: NUQkajBdnmQ

Length: 16min 59sec (1019 seconds)

Published: Fri Jul 27 2018