All language subtitles for 007 Using the Transition Component_en

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.