Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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,889 --> 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.
4046
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.