Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,160 --> 00:00:06,520
Now we learn quite a bit about this transition component over the last lectures,
2
00:00:06,630 --> 00:00:15,640
now one important thing to of course know is that you can also nest this inside any component you want.
3
00:00:15,660 --> 00:00:24,450
So of course we could move transition from the app.js file into our modal.js file and simply wrap our
4
00:00:24,450 --> 00:00:28,780
entire modal with this transition component in there.
5
00:00:28,920 --> 00:00:33,940
That of course also requires us to import transition from that package though,
6
00:00:34,050 --> 00:00:43,600
so import transition from react.css or excuse me, from react transition group transition, like that.
7
00:00:43,960 --> 00:00:51,820
And now we just need to update our code and basically say again that modal is always present in our
8
00:00:51,860 --> 00:00:54,580
app.js file, this component,
9
00:00:54,870 --> 00:01:02,520
show is therefore again back to this.state.ModalIsOpen and now a show inside the modal has to
10
00:01:02,520 --> 00:01:06,510
be used differently, now a show is a property
11
00:01:06,510 --> 00:01:10,010
controlling is in property here
12
00:01:10,380 --> 00:01:14,400
so now this should be bound to props.show which is true or false
13
00:01:14,400 --> 00:01:25,890
now again and therefore, when we control our css classes here we should do that inside a function
14
00:01:25,890 --> 00:01:33,540
between the transition component opening and closing tags where we get the state managed by the transition
15
00:01:33,540 --> 00:01:41,400
component where we then eventually return our div which holds the modal and where we then of course
16
00:01:41,730 --> 00:01:48,510
no longer attach modal open and closed like this here on css classes, instead that's just an array
17
00:01:48,510 --> 00:01:51,270
with modal. Down there instead
18
00:01:51,270 --> 00:01:55,730
in this code we return inside the transition component, there
19
00:01:55,780 --> 00:02:04,230
I instead now need to change my css classes and conditionally animate this. So therefore, let me
20
00:02:04,230 --> 00:02:10,710
restructure this to a function with a function body where I don't just return something because before
21
00:02:10,710 --> 00:02:22,450
I actually return the jsx which should be entered inside this function here, I of course want to
22
00:02:22,740 --> 00:02:30,800
adjust my css classes, so I will essentially grab my constant from up there and now configure
23
00:02:30,800 --> 00:02:35,640
it here to be either just the modal or
24
00:02:35,660 --> 00:02:47,820
now again checking for state being equal to entering, that's the case then I want to use modal opened,
25
00:02:47,940 --> 00:02:49,030
this one here
26
00:02:50,570 --> 00:02:58,570
otherwise if state is equal to exiting and I'm using this entering and exiting classes to move in right
27
00:02:58,570 --> 00:03:01,270
at the point of time we start the animation,
28
00:03:01,450 --> 00:03:07,630
so if it's exiting then I want to have modal closed and in other cases I'll have null, so the same logic
29
00:03:07,630 --> 00:03:10,630
as before but now inside the modal.
30
00:03:10,840 --> 00:03:14,830
If we try this out, we should still get the same behavior as before though.
3428
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.