All language subtitles for 009 Animation Timings_en

Now in the last lecture, we move the transition component inside the modal and then we're just using

the same logic essentially,

now still there is one thing you might have noticed,

we set the timer to 300 milliseconds but the animation we play, we set up in modal.css actually takes

400 milliseconds.

Now that isn't an issue,

it simply will not play the entire animation

that's the thing which then of course might be an issue again.

The timeout you set on the transition component determines how long the entering and exiting state for

which we're checking will be held, for how long

this is basically the state it uses. If you define a timeout which is much shorter than the animation

you play,

you simply quit the animation preemptively because you switched a state too early,

you switched.

to exited which will mean that the element is removed and that of course might not be the behavior

you looking for.

Still it's not necessarily an issue if you set it up like this.

However one thing you might want to keep in mind or you might want to configure in some cases is the

timeout. The timeout right now is only our value in milliseconds defined as a number,

what if you wanted different timings for entering and leaving though, you can set this up,

so let me set this up by defining a new constant

and I do this outside of the component because this is not going to change to constant not related to

the component rendering here.

This constant I'll name animationTiming and that will be a javascript object

and in that javascript object, you can define an enter key and give it a duration of let's say 400 milliseconds

and an exit key of let's say 1 second, 400 milliseconds and one second so that we can really see a difference.

So enter and exit, that's important,

these are the two types you can define and as you might be able to guess, enter simply defines the duration

that we'll use for adding this element, exit defines the duration it will use for removing it.

So now if we pass animationTiming here, this object we just defined to timeout, it will use these values

for the two different types of transition.

With that let's slso adjust the animation in our css file and let's say close modal there

also should take one second. If

we now save this and we go back and we click open modal, the animation in is the same as before

but if I dismiss this, it's much slower over one second

and there you can see the different durations being used.

So that's something to keep in mind about the timing,

it can quit an animation too early and you can also define different timings for entering and exiting.