Let's Create a React CSS Transitions/Animations (React Transition Group)

Key Takeaways

hang on we're doing welcome to a new video tutorial from my opinion which we are going to create a new blue toriel on the series of blurring reacts so we're going to learn basically about the transition group on react how to basically apply transitions on on a reacts Bay based rendering so if you ever really would react if your birth with the reactor lost you know that we have whenever we try to render something he just like in mountains from the Dom and mouths again and so on and so forth so it's basically upon just removing it from the DOM and then adding the Dom which basically means you can cannot add the normal CSS transactions or normal sized animations to be to the elements which is which pretty much doesn't exist on a tongue on this particular case we can use the rehab transition group what does it allow us to do it just like allow us to anime to add like smooth animation or smooth transactions to our components to our elemental and animate them very very easy which I'm just gonna give like walk you through how to use it why the beneficial step and I'm gonna like apply to the real-world examples we have created on the learning react series one thing I want to tell you is you need to go and learn about we have to come in already so we have like a core courses you can find the link in description below so make sure to go how to learn it and also we have created something really cool on tutorial with react she's the react login form right here so what we're gonna basically do is just take this form and animate it like as you can see whatever we try to move between the long game and the reduced to we're simply not we're not doing any transition or something like this what it wants is like whenever we try to move from one to another we apply a really really smooth animation a smooth transition like a fade transition or slide transition to make it like more powerful and more more like live or something this so you can you can feel that's it's pretty pretty good components it's pretty good styling web page or styled what Peter is saying one thing I want to mention as well if other than you feed you to the website so which is the notifications like Bill one here you can finance on the rights on the bottom right corner prim so you can just open up lock in here it's really nice smooth like this one is using the react transition group as we are going to explain today so if you just give us your feedback with some stars you can open in here what what you like or you dislike about storms what we can improve yeah Ariela so you can just give us some hopeful comments in here and also you can just go and check our you get inclusive so you probably just go ahead and jumping through and learn new things we have like a 50% coping current maybe rate for you just for you that's a special discount thing so the carbon cultures click in here and you're just gonna take your team you need to meet cruise pages so it's pretty good pronounced helpful you can just go ahead and walk you through this or you can just learn from eating curses let's just jump back into our project so you came to us you can clearly seen here we have a project in here and it's quite basic project it doesn't have that much of things and I've already gone installed the the needed modulus for this particular story so first things first you need to install the rehab transition group multiple put this to work so make sure just go ahead NPM install whether you using NPM or beyond it's quite basic as you know so in BL install we ask does transition - group and everything gonna be working finally save as I said we would depends it because it's gonna be used like the we asked or something it's not meant about dependency or something and we have transition group gonna work pretty much fine so everything we will pretty much fine after on solid and also already again you can just jump into writing the code so this is the code if you haven't grabbed its from last videos choice you'll get off so it's available for you we just go and grab it or as I told me before you can just go ahead and wants to begin story which is quite basic you can understand the whole thinking here what we did is the description below so make sure to go and check it out now what we did so far in here is just create a go into the SOC and add a new a new folder here which is called transitions and into this folder I've added a new file fade transition so this is the file we're gonna work on like on our transition so make sure to whenever you try to add mas can see you can clearly notice I've had a near like a transition to specifically mean that is going to be a patronization if you have like another such is called a slide transition so we have to add a new file friend and so on and so forth so transition has to have its its own quiet pretty much so to do the transition thing now under the under the file you need to import the transition core so I'm gonna go with important ization from reacts transition group and forward slash transition so so make sure to go ahead and do this step especially the former star transition it's very very important you can't just report it from the reactive oxygen group only so you have to select the subfolder traversing and everything should be very much violet now let me just go in and export like you know we need to create a component for this so we have to create the components that is going to render this one so we're gonna export Depot's that are going to create a class as a components and obviously before doing this since we need components we also need to relax a way to import the react library and all this things so we could have access to the components I'm gonna call this like the fade transition as as the US we have named the file so they transition from or extends so I can quality time reacts components where is this okay there we go got that's now we can have like in structure as we normally do with the prompts and everything and this cream structure so you're gonna have like this thoughts or you call the super with a prop so to to initialize the super method or the the base class which is the component to react components and we're gonna need two different things so we're gonna need the default soil the start is gonna be like applied by people to the components we want to like animates which is going to be let me just add the comments so the default slides will discuss all these dots default style and I'm gonna add this two to it so it's going to be an object so if you're familiar with the CSS you should probably be over the SS because we're going to apply the transitions using a CSS transition of course so it's based on the CSS transition so this is gonna be like a CSS thing so what we're gonna probably do in here is gonna say like the other since as you can see capacity in here's gonna be like on a default style so capacity gonna be zero or something and since we are doing a fade in transition so we're just gonna like manipulate the opacity like playing with the opacity making it zero and making it one or transition transitioning pretty much between the 0 and the 1 values so to make it looks like it's fading in and adding out and so on and so forth so this is the fade transition so make sure to go ahead take a look at how they transition pretty much work so just wait till the end and you can probably notice or see an action health paint transition pretty much works so this is the default style how the components going to be styled and we aren't going to like have an appliance style to it so we're just gonna be like : add transition style and we're just gonna be like a normal style with with a specific API you're gonna use from the traditional group right here so the basic thing in here is going to be gonna have like four different states so that'll be the basic about the transition react transition group it's working with the state so we have like entering states which is an object like this this object is gonna like to represent the style job to apply on the interim state then you have the next stage which is entered so once the component is injured and rendered and mouth to the tongue this stick is gonna be called the lot or the third stage which is going to be exhibit it's getting out of the component or and mounting the component from the Dom and the last one it is exhibit which pretty much means the the component has been successfully mounted from in mounted from the Dom pretty much which means removed from the Dom so we can apply any stunt so this is how we pretty much worse if you familiar with reactors actually before the rendering system behind react what it does it just like whenever you try to remove something or as we are doing ready to go back to the render so we aren't like toggling between the login and the reducer what we're doing is same they start state is logging open if if this is equal to true we are going to render the login box if the only ones looking like it's true I'm gonna run to the register box instead of the Bock so this means we're just gonna like to take this one it is true just take it and mount into the Dom which basically whenever we apply this transition later on to it what we're gonna do is just kind of like get to this through a poor poor state so we can animate it smoothly so the entering the entering the existing and the exhibit so this is how pretty much works that we have transition in group now here we can apply whatever thing let's say whenever we are trolling through entering so we're gonna say the capacity is gonna be 0n on Android so gonna say also the capacity so this is like a painting very basic transition you can have way much more complicated things in here going on the background and stuff so I'm just gonna save it I'll pass the 0 then the opacity 1 whenever we introduced gonna like transition from the 0 of the pasty value to the one first opacity value so this is how it pretty much can it work like him from here and you can just go anywhere play the examine makes it for now we're just gonna leave it blank reindeers and just fully explain purposes I'll put it right there and obviously as a normal components we're gonna need a render method to put our render drive right into it so the cone we need to return in order to render the actual Dom so here we're just gonna like to return as we normally do and for this what we're going to need to do is like I'm going to use this fake transition components the components or clean it up here as like a permanent component so we can rob something on and let's say let me just show you an example here we can store in like use fade transition like this and we can put whatever like a div or something like from here like if they don't have a word and this step is gonna be like you know is going to be the targets transitioning elements so this is this damping here is gonna the the one who's gonna receive pretty much the transition so it's the targets transition elements so it this is how what we want so to do this we need to use the children we're going to like receive children from the reacts properties and we're entering them back how we can do this it's quite basic as well so the president's first whatever you try to return we need to return the actual transition group the the main group in here and the group actually two arguments the first argument is the in iron as this argument till it's if the the actual components is being rendered or not so this is the booing it's true or false so we tell the sponsor remember in here if this is true we render this one if this fall's are just likely removed from down L or do not render a short amount from the Dom this is the same thing so we true just going to like render whatever children comes in in sighing those two talc elements and if it's false it's just not going to render in nothing or something and if it's true and false it just gonna like you know take the like switch between those entering and exiting states and so on and so forth so this is how it depends rather than just using the end operator in here you can just put it in right in here and it just gonna prove your point and also you're gonna need like the time outs think this time what is going to represent the duration of the actual transition how how many duration you want or the actual duration time in milliseconds or whatever you specify so we're gonna talk about this a little bit so I'm just gonna like use this or grab this from our properties I'm just gonna call this and duration so we need to add situation and also this one we're gonna use this from the property it's gonna like prompts dogs is open is open is who like way much more bear variable notation thing so anyone can and can understand it and pretty much we threw it in understand the actual functionality behind it so here we've got the transition as I told you now we need to render the actual thing so the transition what it takes it takes a function so what anybody function a function takes a status and image or pretty much a callback that gonna like return us the currently rendered state or the currently being reduced a so whenever like moving from the entering to the entered the stage gonna change it front to and enter during the exhibit state this one is gonna be examining and so on and so forth this is like pretty much a normal string so what we're going to need to do here as well is return something to it specifically to the state so depending on this stage we're gonna return the style applied to it so if we are in the entering we're gonna apply this title the children elements if you are and the entry I'm gonna apply this one this particular one the opacity one the style to the the actual children doctors who helped gods and so on and so forth this is how we pretty much can apply it to the actual children so to do this when I first need to like before returning here we just go and check the state because this is like very very very important so we need to check if it's exhibit just order to return in order to make sure that's gonna return or render nothing so returning all your children react that's do not try to earn anything to to the Dahmer or whatsoever so never end doing our all and also if you if it's rather than exhibit any other states can do the job now we can just go on a look through the children so react have a very specific we like IP I like you can use to be children receiving using this browser you can access through store perhaps thoughts and you can find the children's candy like the special react collection it's not an array or something it's special react collection holding all the children you're gonna pass in whatever you try to recognize HOV before or as I showed you with the dipped example and a couple of seconds to go so here what you can do is using the react API so you can access react dots children and you can save the map function the map function just allow you to like loop through the array or the collection of children so we can use the the specific this one you can use the one on the children it's all because it's not an actual creates a collection react special special collection so in the first one the first argument it takes is the actual children the second one is going to be the callback the first one takes is a child the second one is the index of the child so a 0-0 based index pretty much and here you go so here you need to like group through each element in return and another element we then applied a style the the stars going to apply is with the currently running state so we are in the entering you need to apply the style of the in train if you're entering you need to apply the style or feeling to it with an opacity one or someone and so forth this is how we can do it and you can like distinct between which stage you are in using the state callback you are watching here so everything is being decided for you and everything for you if you point this a little bit like confusing the stuff you can just go in and copy this change the style right here and everything gonna pretty much work for you for the transition group then you can just put the transition as appearance pretty whatever child on it the improper e and you're gonna come up you can get actual transition group or CSS transition on the actual yes now the last thing we need to like return and apply the the clone style to the actual show child with the distance here real local so we can access one single child from the collection now to do this we're going to use the react clone elements specific function what does this function do let me just go ahead and like go to the react top label API it really will come and go and have reading through this so you can see clone elements what it does clone and return a new react element using element as a starting point the resulting image will have the origin elements properties with new props merge it in so what we're gonna do is the only miss you can return it just gonna like keep its properly its own property its original properties gonna be kept for it but what we can do is just merge new properties to it this is how we're gonna do so the property is gonna hold the style and this style is gonna be merged with its soil so we can apply the style so the new style or the new mirja style is gonna be like over eyes the default style or the default props so this how the company reacts color which works the first argument it takes is the actual trial we want to clone the second one is gonna be an object this object is gonna hold the actual stuff so we can put in here styles Kelsey and the style is another object so you can just apply to it in this particular case what we want is use the objects well object dogs let me just go out and see while the objects is not being defined and here let me just remove the objects so what we want is to grab the actual things you can use the object of my method the object is time method where it takes it takes a target and a source and I like merge them together so whatever you give it like two targets is going to return the target very much in like several sources like an array of sources just gonna take all of them merge together and return to you have brainy new objects so we want to return a new object adhere the yogurt sauce we're gonna grab from which is this dot default style so we want to override the default style with the current style which we can access this dot transition style and the transition style remember it's an object with another objects like a nested object so what we want is to access the currency states and grab the object of it the current style object okay so so we want it just passing the state in here just gonna return us either entering or the intern or whatever objects style we want to grab from it so here everything should be much work point and yeah everything here it might seem a little bit confusing it might seem a little bit like I don't know very hard for you to understand quite simple you can just come in and read through it or in here walk through it basically in here and just try to figure out what it is and just try to like search for google which is the object on which the clone elements read more about it try to understand it better and everything hopefully should be like illuminated for you as soon as possible so that was actually for the faint transition that we need to apply one other thing we need to like think about in here this people stuff so we need to apply this to CSS transition right now for this transition we like to tell it a transition properties so we need to say which transition property so transition from 13 okay if the transition property we know effect it is the capacity and the other thing is gonna be like the transition for the transition what we want here I'm gonna use like the compiled strings and for this transition I'm just gonna give it this duration so perhaps top configuration and I'm gonna give it to me milliseconds and obviously I'm just going to use the ease so yeah cooperation core simple and let me just go in and get rid of this because this is gonna be applied during the transition style and thinking here all we need to do is just like tell it which transition property we need to manipulate and the actual transition property with the tylium function and the actual timeout and everything are specifically for the CSS transition properties so you have to take the mouse before like you can understand them better or something so this is all we going to need to do for this basically as you can see it's quite a simple so now go to the our renderer right here and let me just go in and pour that so as you can see in here or also reporting the transition group which basically going to work for you if we try to do another thing but in this case it's just gonna work for a spine we only need to transition without the transition group and we recommend giving a checking documentation now let me just go ahead and put the transition that we have cleared so in forwards let me just fade transition going back one something go to the source key for slash transitions in transition and here we go so we've got the actual transition component now we to render the actual transition components now whatever we also can see here whenever we try to render the login box let me just get rid of this get our the curly braces on the react and what we can do is like wrap this into the actual fade transition appearance so the plate transition is gonna be apparent and we can wrap this around it so remember we have the is open properly and as we have specified which is true drill false and we can like do this Dodd's dance is logging open so if it's logging open this transition is gonna work and you're just gonna like fade in the login box else if it's not just gonna like take it out or something or never render it anyway to the heat to the actual top let me just go ahead and copy this one as well and put it right down here and I'm just gonna say is just turn open just your open and I'm gonna just your watch and here when you need to apply the animation you're probably gonna need to like like assign the class box container under that I like before rendering the actual login box in the register box so since we're where we put it in like up here we're saying dev insane box container it was like up here holding the whole the both of them like condition the login box were both child of this box container so you should move each one independently to its own those are like a really bad bond back with that we did it last video tutorial when we created this login portal slash register box but now it's fixed image to put it right there also put these open state or is login is locking open which true or false the boolean of course and of course here we've got the duration the duration which is I'm just gonna put like five hundred milliseconds to make it like looks a little bit better like that paid gonna take the paid in whether the Padian were paid are gonna take 500 milliseconds I told you this is a minute seconds you not seconds and you can just put it whatever value right there also what I think I made changes to is if they have true transition itself so I got into the entrance State on the transition style objects any make this one like I added the transition delay why we did that why I did that in particular because when you have in this case when we need to change from the login box to just your box like moving back and forth between them and vice versa so I'm gonna find it a little bit glitchy in and then you're gonna have like a very very weird animation like something pops saying into the other one like the let's say you wanna move away from the login to the registers of a register animation gonna start at the meantime the blocking working animation doesn't actually quit all the time so you have to delay the starting of the the next animation before the other one exists and so on and so forth so you have to give the the animation your country on a little bit of time to exit so the other one should have a delay to start and so on and so forth so this is how you probably should put it ruin right in your code right here in the transition delay and as I've told you before you're gonna need to know a little bit of CSS transition properties and how to work with them how workarounds because this is all depends on CSS and the CSS transition properties and you have to know how to manage them and manipulate them and to create your own animations from your own thing so now just dump it right into the code right here or the actual preview in here and refreshing everything and it we've got the final demo right here so let's try to move from the login to register just move right in here and as you can see who gets this really really really nice smooth animation from moving the log into the register or vice versa from register to the log game we get this really nice like fading and fading in and fading out and so on and so forth so this is it so you make make sure to provide this one and everything should look pretty much fine for you some things also watching as I told you again make sure to go and check out the website leave your feedback why not and it would be very very peaceful for all of the things so English watching as we can set again I said it three times but no problems see all guys in the next video