React Animations Tutorial using React Transition Group

hi there it's Peter here again the guy who ate tomorrow's part of front-end development in today's video you will learn how to use the react transition group module to fade in and fade out elements of your react state but as always before we do that don't forget to hit the like subscribe to the channel for more videos like this before we dive into the code let's review what we will be building will use the react transition group to fade everything in on a page load that we'll be using the appear functionality and then we will be changing the content of the card when we click on next we bringing a new card in but before we do that we animate the old property out okay so this will be using again the react transition group and will be in full control of the CSS animations react transition group applies the specific classes when the elements appear on the page when they enter and when they exit the viewport and for that we will need to be in full control of the classes when are they applied and when and we will cover all appear enter and exit classes and the first one is the appear okay so this happens when the element is mounted and when the page is loaded for the first time that's when they appear animation happens we will need to specify the in to be true and appear true as well then we specify the timeout which is the length of the animation and the class name is fate so that's the first part of the animation class and then it is appended by the appear and appear active okay so the fate becomes the name of the class so you can make and name this whatever you feel like but fade we will use fade in our example okay the next one is the exit I'm specifically using the exit after appear because we will firstly appear everything on the page and then we will exit the old card out and bring the new one in okay so the order I'm covering this in make sense and you will see later why it makes sense firstly everything appears on the page then we exit we fade everything out and we'll fade in the new card in okay so here is the fade exit class in action this will this is what we'll be having in a style sheet we animate everything out and then we use the enter to bring the new card the new property in okay this will animate from opacity 0 to opacity 1 and the duration is the same okay I kept the duration the same just to make it very very simple but you can obviously make more complex animations if you feel comfortable with the classes now let's review the code inside of vs code we have a simple app that has three methods on it toggle appear next property previous property these three are toggled or run when we click on these three buttons will explain a little bit later what appear does but the next and previous is pretty simple we are changing the state the property on this application okay so we have a collection of data properties inside of the data folder which is an array of properties and we are taking the first one and applying it to the state okay so every time we load the page there is a one property the first one from the array is set on the state and when we click Next we simply adding one to it and changing the new property okay so this will be using the previous using exactly the same code but we are changing the index to minus one and the toggle appear changes the state of the appear home that will trigger the appear animation true or false and we'll simply toggling it from the previous value okay so hopefully you are familiar with react this should be very very simple state that you already familiar with and now we can dive into the animations we passing the property of the current state inside of the home component and inside of here we have a card component that renders the property and we passing the property from the top level all the way to the card and that's what renders the nicely styled property inside of the card okay so that's the three components that we will be working with we've covered the data JSON object and inside of the stylesheet I have a default style solace these are NDErs and looks presentable on the screen and if we look at this in a browser you will see that we don't have anything appearing simply it just shows on the page and when we click Next the card is replaced with the new value with the new object and we don't see any animations okay so now let's try to figure out how to use the CSS animations of the react transition group to fade everything in on a page load now let's go back to vs code and inside of the app dog is inside of the render method we want to wrap this home component inside of the CSS transition so let's firstly import it at the top of the file we'll import it from the react transition group module and we importing the CSS transition okay so that will let us wrap the home component inside of the CSS transition and now we can specify couple properties of it the first one will be in we want to set it to true and we've set this as the appear a home on our state ok so if I scroll back up we'll see that the appear home is inside of our state the default value is true so we have the in set to true now we will set also the appear to be true okay so that what tells the transition to really run the CSS transition on the page load and then we will set the timeout to be 600 milliseconds okay the last thing we need to specify is the class name and that will be fate and actually it's not a class name its class names okay because this will generate multiple classes and that make sure that you've got also class names not just class and name like on all the other react elements and fade will be the base keyword that will be used for our animation okay so if I look at the style sheet for the first time and you will see that we have a couple default stars at the top of the star sheet there is some default styling but then we have the appear on a page load the fade is the keyword that we've set inside of the react component and we are animating it from opacity 0 to opacity 1 in duration of 300 milliseconds okay so I could actually change the duration to 300 milliseconds to match our time out inside of the CSS and if I save both files and review it in a browser we should see a nice animation of simple fading on a page load okay it happened quite quickly so I go back in here and if I go back to the animation dev tools you see that we have the animation happening and that's what triggered that's the CSS animation component that we've introduced and I think if we make it one second just so it's more obvious we'll see that the animation really takes one second so if it's the intro animation on your page load the animation could be slightly longer but for any transitions between elements it should be much faster okay so I think it looks pretty elegant when things fade in instead of if they just appear so this is how you would use the appear of CSS transition group to show things on a page load now I've made the animation to last 10 seconds and you can see the Fate appear class and fate appear active class applied so that's what makes the animation and at the end of it we see fate and done okay so if you have a final state ending state of your appearing transition then you would put that in the fate and done okay in my example I'm not using I'm not starting anything the page or the elements are styled the way that they would normally appear so I don't have any specific fate enter done styles but if you want it you can use the glass as well now let's do the transition of the card itself so when we clicking on the buttons and changing the property inside of the card we want to animate one out and bring in the new one and for that we will use the CSS transition as well so we can import it we can copy the import paste it inside of the home and we will also this time use transition group okay so we need to import transition group as well the reason for that is that now we will need to render two elements at the same time one is the car animating out and one is the car animating in so for that we will need to wrap it inside of the transition group we didn't have to do it on the app because we had only one element there is nothing we don't need to pass in any key or anything it's just one component that we want to fade in but for the card we want to we need to know which car to animate out wait with the animation in a little bit and then bring it in okay so in that case we will need to wrap it in transition group and for that I can simply replace the deep the container of the card - transition group and inside of it we'll have the CSS transition ok so again we'll wrap the card inside of CSS transition and we'll specify the attributes on it we will set the timeout to 300 milliseconds set the class names to fate so we'll keep the same naming as in the app component and this time we need to also specify a key okay if we don't specify a key we will not see any transition because the transition group will know which one is currently the one which should be rendered so remember when you have any two elements you need to always specify the key for the transition to work and we using the property dot ID that comes from the properties array okay so here are the IDS of the properties they are unique IDs and that's why we need to pass them or we using them the key of these CSS transitions and this will be it if we look at the CSS stylesheet we have the fade enter glasses and fate exit class is already done again we are fading in and out so we should see the old guard animating out and new one animating in okay so let's see how this looks in a browser we're clicking on the next and we see one animating out one animating in as you can see the transition timeout is only 300 milliseconds so it feels very fast but in some cases this is what you want a simple transition between two elements instead of swapping the data makes a nice user interaction much better user experience okay so if I slow it down now we'll see the cards fading or cross fading into each other over the duration of five seconds and we have the fade and fade exit glasses applied at the right time okay so at one moment we are rendering postcards and we cross fading them if we want it to fade one out and then fade the new one in we would need to edit D life okay so let's do that now together we can increase it to ten seconds just to make it very obvious and inside of the style sheet we will keep it for five milliseconds or five seconds but we will set the delay on the enter animation to 500 milliseconds or 5,000 milliseconds okay so five seconds we will be animating out the old card then we will wait with the fading in for five seconds and over the duration of five seconds we'll animate it in okay so this will make not a crossfade transition but we will firstly animate out the old card and bring the new one in and for that we need to have the timeout the five hundred five seconds plus five seconds okay so we need to have it set to ten seconds okay so if I go back to the code or back to the browser and click Next let's bring up the card inside of the elements and click on next we'll see firstly fading out the old card and then we are fading out a new one okay so this is a slowdown of the fade in fade out without the crossfade ok another little thing which could make a different experience so based on your designs based on your UI you can either crossfade these two elements or fade firstly out the old one and then bring the new one in using the CSS delay okay so hopefully this makes sense hopefully we've got covered quite a lot about the react transition group and how to apply the styles and classes to make some better user experience now let's create one more effect this time we will call it slide so inside of the home component we'll change the class name to slide we will change the duration to 450 milliseconds and inside of the style sheet I have the slide enter and slide exit class is already created we are using the transform scale and we are scaling it down and up on the transition in or out okay so I'll firstly show you how it looks in a browser it's quite quick transition and then we can slow it down again so we are animating out the old card and from the same spot we try to animate the new one in okay so again different layout or different different affect how you can replace two different states of application and show a better UI for the users here is the ten times slower variation of the same effect you see the first card animating out and the new one fades in and scales up to the original position and if we look at the car inside of the inspector you'll see that now we are applying the slide enter slide exit glasses and that's what creates this effect okay so I'll let you explore the star hopefully you are familiar with how CSS transitions work this tutorial wasn't aimed for CSS transitions I wanted to focus on how the react transition group works and which classes are applied when and that's it all for today I hope you've enjoyed this react transition group tutorial let me know in the comments are you using CSS animations in your react project I'm very curious to know so let me know in the comments if you've enjoyed it don't forget to hit like subscribe to the channel and I'll see you in my future videos until then happy coding bye [Music]

Channel: Ihatetomatoes

Views: 83,036

Keywords: react animations, react tutorial, react animation tutorial, visual studio code, vs code, ihatetomatoes, css3, transition, react transition group, react transition group v2, react, animation, html5, 2018, javascript, es6, how to, fade in, fade out, crossfade

Id: BZRyIOrWfHU

Length: 16min 47sec (1007 seconds)

Published: Thu Aug 02 2018