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.