In the last lecture we use the transition component to see how it works and how we can use to control
whenever an element is removed or shown.
Let's now use this transition component on the modal to animate this,
so for that I'll again add my transition component down there, opening and closing and in-between as we
learned, we will get a function where we get this state arguments which is entering, entered, exiting or
exited.
Now we also find what should be rendered in-between, in-between
I want to render my modal
so I'm going to cut this out here and enter it right there.
We can remove this check below that, I will leave this check for the backdrop because I want to still show
or hide the backdrop just like this without an animation therefore I can also just set a show like this
to true always because it's removed
anyways if I don't want to show it. Back to the modal, there we now want to control this transition so I'll
set the in property to this state and then ModalIsOpen,
if that's true then the element returned here in this function should be shown or treated as entered.
I want to do this let's say with the timeout over 300 milliseconds,
now what I can do is I can pass the state and with that, I mean this animation state stored in this
argument into the show property in the modal. Inside the modal,
I then can take advantage of this to still attach different classes,
however what I will do here is I will check if props.show is equal to entering which is attached right
at the start when we click this toggle modal thing,
then I want to play the modal open animation otherwise, for that I'm going to split this over multiple
lines, otherwise I want to check whether props.show is equal to exiting,
in this case I would like to play or add the modal closed class,
in all other cases, no css class will be added.
If we now save this and we go back to our application, if I click open modal, you see the animation is played
for showing it and also for dismissing it. And still what I can do is an app.js,
I can also if I just split this over multiple lines to have an easier time reading this,
I can also still add mountOnEnter and unmountOnExit here to really get rid of it and still if I click
open modal, I get the animation, the same for removing it because now we're taking advantage of this transition
property which simply adds a delay before it is removed from the dom which gives us the time to play
our animation due to the state we get and due to us using this state inside the modal component,
here where I check where we're sitting which is the state right before it's removed from the dom. And
therefore unlike before,
this is now not happening too late.