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.