1
00:00:02,150 --> 00:00:07,190
Now in the last lecture, we move the transition component inside the modal and then we're just using

2
00:00:07,190 --> 00:00:09,050
the same logic essentially,

3
00:00:09,200 --> 00:00:12,990
now still there is one thing you might have noticed,

4
00:00:13,280 --> 00:00:20,690
we set the timer to 300 milliseconds but the animation we play, we set up in modal.css actually takes

5
00:00:20,780 --> 00:00:23,230
400 milliseconds.

6
00:00:23,330 --> 00:00:24,970
Now that isn't an issue,

7
00:00:25,010 --> 00:00:28,030
it simply will not play the entire animation

8
00:00:28,100 --> 00:00:31,420
that's the thing which then of course might be an issue again.

9
00:00:31,610 --> 00:00:38,390
The timeout you set on the transition component determines how long the entering and exiting state for

10
00:00:38,390 --> 00:00:42,440
which we're checking will be held, for how long

11
00:00:42,430 --> 00:00:51,920
this is basically the state it uses. If you define a timeout which is much shorter than the animation

12
00:00:51,920 --> 00:00:52,700
you play,

13
00:00:52,880 --> 00:00:58,540
you simply quit the animation preemptively because you switched a state too early,

14
00:00:58,580 --> 00:00:59,110
you switched.

15
00:00:59,120 --> 00:01:04,400
to exited which will mean that the element is removed and that of course might not be the behavior

16
00:01:04,400 --> 00:01:05,840
you looking for.

17
00:01:05,870 --> 00:01:11,140
Still it's not necessarily an issue if you set it up like this.

18
00:01:11,150 --> 00:01:18,140
However one thing you might want to keep in mind or you might want to configure in some cases is the

19
00:01:18,270 --> 00:01:27,050
timeout. The timeout right now is only our value in milliseconds defined as a number,

20
00:01:27,470 --> 00:01:34,960
what if you wanted different timings for entering and leaving though, you can set this up,

21
00:01:34,970 --> 00:01:38,610
so let me set this up by defining a new constant

22
00:01:38,630 --> 00:01:44,210
and I do this outside of the component because this is not going to change to constant not related to

23
00:01:44,210 --> 00:01:46,110
the component rendering here.

24
00:01:46,580 --> 00:01:53,930
This constant I'll name animationTiming and that will be a javascript object

25
00:01:54,200 --> 00:02:02,500
and in that javascript object, you can define an enter key and give it a duration of let's say 400 milliseconds

26
00:02:02,900 --> 00:02:08,880
and an exit key of let's say 1 second, 400 milliseconds and one second so that we can really see a difference.

27
00:02:08,890 --> 00:02:12,590
So enter and exit, that's important,

28
00:02:12,610 --> 00:02:19,510
these are the two types you can define and as you might be able to guess, enter simply defines the duration

29
00:02:19,500 --> 00:02:26,080
that we'll use for adding this element, exit defines the duration it will use for removing it.

30
00:02:26,080 --> 00:02:34,300
So now if we pass animationTiming here, this object we just defined to timeout, it will use these values

31
00:02:34,420 --> 00:02:38,210
for the two different types of transition.

32
00:02:38,660 --> 00:02:45,530
With that let's slso adjust the animation in our css file and let's say close modal there

33
00:02:45,690 --> 00:02:48,040
also should take one second. If

34
00:02:48,320 --> 00:02:54,950
we now save this and we go back and we click open modal, the animation in is the same as before

35
00:02:55,040 --> 00:02:58,890
but if I dismiss this, it's much slower over one second

36
00:02:58,950 --> 00:03:01,950
and there you can see the different durations being used.

37
00:03:01,970 --> 00:03:04,580
So that's something to keep in mind about the timing,

38
00:03:04,700 --> 00:03:12,170
it can quit an animation too early and you can also define different timings for entering and exiting.