All language subtitles for 011 The CSSTransition Component_en

So over the last lectures, we learned a lot about transition. Now sometimes you don't want to control the

transition as we do here where we get this function with the state and where we then manually attach css

classes or change the style. We can of course do this,

we are doing this in both the app.js file and our modal.js file

but sometimes you just want to have a couple of predefined css classes for the different animation states

and you want to make sure they get attached depending on the state of the animation.

Essentially what we're doing here manually would be nice if that would be managed automatically

and turns out the package we're using has a special css transition component,

so let's import that from the css transitions subpackage

and let's also use it then here in our jsx code. Css transition doesn't use any function in-between

the tags,

instead you just enter the jsx code you want to output, like that. Class name

therefore now can be set back to modal.

Right now, this wouldn't have any animation

we just have this css transition element, if we now go back to the application and we click open modal,

now we actually even get this error right now if we're using it.

The reason for this error is due to the way this component works, we need to add a special property to the

css transition component which is called classNames, not className as we use it on other properties,

classNames because here we define which css classes should be added to the wrapped element,

so to this div depending on the state of the transition.

It will always keep the classes we had on the element like modal in our case but then merge these new

classes with that.

Now what are these new classes though?

We can define the trunk of these classes so to say, for example we could name this fade-slide and

you can use whatever you want.

Now what this will do is that the css transition component will automatically cycle through a couple

of css classes and merge them to the div here, the div it wraps or any element it wraps of course

depending on the state of the css transition or of the transition

in general. The classes it cycle through are your trunk,

so fade-slides in our case and then -enter which is attached right at the point of time it starts

entering, enter-active which will be kept attached whilst it is in the entering mode,

so in our case whilst it is running through this duration of 400 milliseconds, the -entered

class on the other hand will be removed right after one frame and we also got -exit which is attached

right when we start exiting and exit-active,

so it's our job to now add these various classes to our application in any global css file or a file

scoped to this component where we want, in our case I'll add it to modal css.

So there I will add .fade-slide.enter class,

then I'll add fade-slide enter-active class then I'll add fade-slide exit class and then a fade-slide

exit-active

class. These are now all the classes I can define and fill with life and which will get added to

the wrapped element to this div

in our case depending on the state of the transition.

Now back in our modal.css file, we got animations already

so let's take the animation for opening a modal and we now could add it to fade-slide

enter or enter-active,

as I mentioned, enter as well as exit will be removed after one frame.

We can use these classes to do some initialization, like for example set the opacity to 0 at the start

of the animation but enter-active and exit-active is where we then play the actual animation, so it

is here that I add the animation property and the same for the closing,

I'll add it to exit-active. I'll leave the two classes empty and we could of course therefore remove them.

Now with that if we save all files and we go back to the application, if I click open modal,

we're playing the animations from before again but now we don't manually have to assign css classes and

join them together, instead

now we're taking advantage of the css transition component which moves through these css classes

based on our trunk automatically. And therefore you often find yourself using css transition,

it often is the more convenient component to use since you can control the entire animation in css

code by simply defining these css classes.