Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,190 --> 00:00:09,490
Let's have a look at react transition group you can simply google for it to find the github repository
2
00:00:09,490 --> 00:00:10,910
of this package.
3
00:00:10,910 --> 00:00:18,990
Now this package is not an official react package or not by the react team but it's a package created by the vibrant
4
00:00:18,990 --> 00:00:26,730
react community and this is a package which allows you to smoothly animate elements when they
5
00:00:26,730 --> 00:00:29,820
are added and removed to and from the dom.
6
00:00:29,970 --> 00:00:32,460
Well let's check out the main documentation,
7
00:00:32,640 --> 00:00:38,180
there you'll see how to install it and then it also describes how it works and how it's used,
8
00:00:38,190 --> 00:00:44,370
feel free to dive deeper into this to really see all possible use cases and what else you can do with
9
00:00:44,370 --> 00:00:44,750
that
10
00:00:44,940 --> 00:00:50,400
but of course, I'll also show you how we may use it together over the next lectures.
11
00:00:50,550 --> 00:00:53,020
First of all let's install it with this
12
00:00:53,010 --> 00:00:57,030
npm install react transition group save command,
13
00:00:57,130 --> 00:01:00,980
I copy that, I'll quit my npm start process,
14
00:01:00,990 --> 00:01:08,430
paste this in and simply run it to now install and store this package in this project here
15
00:01:08,490 --> 00:01:12,090
and of course you add it like this to any react project,
16
00:01:12,100 --> 00:01:14,760
thereafter we can restart npm start.
17
00:01:14,910 --> 00:01:21,840
And now let's start very simple and see this in action, for this I'll not even start with the modal
18
00:01:21,840 --> 00:01:29,440
for now but we'll also soon animate this again but I'll add a button here and that button should
19
00:01:29,440 --> 00:01:35,860
simply show or hide a nice little block, a div with a background color.
20
00:01:36,190 --> 00:01:41,650
So there I'll say toggle and below that toggle I want to render a div,
21
00:01:41,710 --> 00:01:49,770
now first of all let me simply add showBlock here in the state and initially that is false, let's say
22
00:01:50,180 --> 00:01:58,150
and then here, below the button I'll check this.state.showBlock if it is true I'll add a div here
23
00:01:59,330 --> 00:02:00,530
if it is false
24
00:02:00,710 --> 00:02:04,040
I'll render null, like this.
25
00:02:04,040 --> 00:02:10,280
Now this div will receive some inline style here with double curly braces to basically pass a javascript
26
00:02:10,280 --> 00:02:13,450
object and in the javascript object,
27
00:02:13,460 --> 00:02:23,200
I'll set the background color to red and additionally I'll set the width to 100 which will be interpreted
28
00:02:23,200 --> 00:02:27,160
as pixels and the height to 100.
29
00:02:27,220 --> 00:02:34,360
Now with that, let's hook up this button and on a click on this button, I'll actually simply execute a
30
00:02:34,360 --> 00:02:42,700
method here, in this method I'll execute this.setState in the function version where I get the previous
31
00:02:42,700 --> 00:02:54,040
state and then simply return a javascript object where showBlock is set to not previous state
32
00:02:54,070 --> 00:02:57,250
showBlock like that.
33
00:02:57,270 --> 00:03:01,150
So now I'm just basically just toggling between the display of the block,
34
00:03:01,260 --> 00:03:06,130
if you click this button here, we do instead see and hide that
35
00:03:06,360 --> 00:03:08,980
and to make this a little bit less ugly, I'll
36
00:03:09,000 --> 00:03:12,460
also add a line break below our button here,
37
00:03:13,950 --> 00:03:15,830
should be a self-closing element though
38
00:03:16,110 --> 00:03:25,990
so that now it sits above open modal, like that. Let's also quickly add margin auto to our div so that it
39
00:03:25,990 --> 00:03:33,670
is centered and let's give our button this button class name here to also improve its styling a little
40
00:03:33,670 --> 00:03:34,780
bit.
41
00:03:34,810 --> 00:03:40,630
Now with all of that if we save this, we get our toggle button toggling this red block,
42
00:03:40,630 --> 00:03:47,140
now it might not have enhanced the look of our application but now we can use this block to start playing
43
00:03:47,140 --> 00:03:48,990
around with the react transition package
44
00:03:49,000 --> 00:03:52,270
we just installed. If we check out the documentation,
45
00:03:52,270 --> 00:03:56,340
we see that this package exports one important component,
46
00:03:56,530 --> 00:03:59,340
it actually exports more than that but we'll start with this one,
47
00:03:59,410 --> 00:04:01,340
that transition component
48
00:04:01,360 --> 00:04:03,130
now let me show you how this works.
49
00:04:03,130 --> 00:04:06,610
First of all in my app.js file, I will import it
50
00:04:06,730 --> 00:04:08,580
so I will import transition,
51
00:04:08,680 --> 00:04:10,120
you can name this whatever you want,
52
00:04:10,150 --> 00:04:18,370
it's a default export but I'll stick to transition from react transition group /transition
53
00:04:18,459 --> 00:04:22,450
so that's a subpackage which gives us this transition component,
54
00:04:22,450 --> 00:04:26,750
now we use this transition component to wrap what we want to animate,
55
00:04:26,920 --> 00:04:30,510
in our case that's this div here. For that,
56
00:04:30,550 --> 00:04:36,930
let me temporarily get rid of our check here whether we want to render this or not,
57
00:04:36,940 --> 00:04:43,870
let's say we're always rendering this and instead let's add the transition component and wrap the div
58
00:04:44,140 --> 00:04:45,820
with it like this.
59
00:04:45,880 --> 00:04:52,840
That alone won't do much but we can now use this transition component to control the display of elements
60
00:04:52,840 --> 00:04:57,610
inside of it and especially the animation of these elements.
61
00:04:57,610 --> 00:05:01,230
We do this if we have a look at the documentation
62
00:05:01,360 --> 00:05:08,890
by setting this in property, that's an important one. This decides whether the elements wrapped inside the
63
00:05:08,890 --> 00:05:12,700
transition component should be shown or not
64
00:05:12,910 --> 00:05:22,570
amd the transition component simply manages four internal states, entering, entered, exiting and exited which
65
00:05:22,620 --> 00:05:29,240
we then again can listen to too to decide how our elements should be shown,
66
00:05:29,260 --> 00:05:30,480
sounds very strange,
67
00:05:30,490 --> 00:05:32,220
let me show you how it works.
68
00:05:32,590 --> 00:05:37,650
So first of all, let's add this important in property to the transition component,
69
00:05:37,880 --> 00:05:42,250
in determines whether the wrapped elements should be visible or not
70
00:05:42,280 --> 00:05:48,310
so therefore for our div here, we should bind it to showBlock, only if showBlock is true
71
00:05:48,430 --> 00:05:51,820
this div inside the transition component should be rendered.
72
00:05:51,910 --> 00:05:56,840
We also got another important property we have to set on the transition component, timeout.
73
00:05:56,890 --> 00:06:05,170
Now timeout simply is a time value which determines how long this animation should be played or to
74
00:06:05,170 --> 00:06:11,500
be precise, since transition on its own doesn't play anything but just manages these four states I mentioned,
75
00:06:12,060 --> 00:06:19,520
timeout simply determines how long it takes to switch from entering to entered and from exiting to exited
76
00:06:19,520 --> 00:06:20,170
.
77
00:06:20,260 --> 00:06:21,870
and it's this in-between thing
78
00:06:21,880 --> 00:06:23,590
you can then animate.
79
00:06:24,070 --> 00:06:27,100
So here, let's say timeout should be three hundred
80
00:06:27,130 --> 00:06:30,790
and that will be interpreted as milliseconds.
81
00:06:30,820 --> 00:06:37,120
Now with that what happens is that inside the transition component, we can render something dynamic with
82
00:06:37,120 --> 00:06:44,020
curly braces because inside there, we now actually should render a function, that's what the transition
83
00:06:44,020 --> 00:06:51,250
component then in the end gives us back, values we can use in a function or only one value to be precise,
84
00:06:51,520 --> 00:06:52,560
the state.
85
00:06:52,630 --> 00:06:59,710
So in the simplest form what we can do here, we can simply write an arrow function, that is why we need
86
00:06:59,710 --> 00:07:00,850
the curly braces,
87
00:07:00,910 --> 00:07:05,640
this arrow function should then of course return the jsx we actually want to render
88
00:07:05,830 --> 00:07:12,490
and that could be a paragraph which outputs that state again wrapped in curly braces since we're
89
00:07:12,490 --> 00:07:15,110
inside jsx code here again.
90
00:07:15,250 --> 00:07:17,840
Now I'll temporarily cut the div here
91
00:07:17,880 --> 00:07:19,660
to keep it in memory but remove it.
92
00:07:19,660 --> 00:07:27,010
Now with that if we also fix the error I just saw, that in of course should be bound to this state
93
00:07:27,070 --> 00:07:30,640
showBlock, showBlock properties are a state.
94
00:07:30,640 --> 00:07:37,330
So now with that if we save this and we go back to our application, we see that we see exited there because
95
00:07:37,330 --> 00:07:43,600
I am just outputting some text here with my paragraph where I output the state value which is given
96
00:07:43,600 --> 00:07:46,880
to us by this transition component.
97
00:07:46,900 --> 00:07:53,740
Let's see which other values this state value or argument can have, if I click toggle,
98
00:07:53,740 --> 00:07:59,550
you'll see it first switched to entering and then to entered, if I click toggle again,
99
00:07:59,560 --> 00:08:07,090
it's first exiting and then exited and if that's too fast, simply bump up the timeout to let's say 1 second
100
00:08:07,330 --> 00:08:08,970
to have a little bit more time,
101
00:08:08,980 --> 00:08:17,530
now if we click toggle, we see it's entering, entered, exiting, exited and that's all this transition
102
00:08:17,530 --> 00:08:19,060
component does for you,
103
00:08:19,060 --> 00:08:26,870
it manages this state argument it gives to you in a function you pass as a child of the transition component
104
00:08:27,430 --> 00:08:33,700
and this managed state property takes your timing into account.
105
00:08:33,700 --> 00:08:39,960
Now with that, we can of course go back to rendering a div in there but not actually in there like this
106
00:08:40,179 --> 00:08:42,840
but instead in our function here,
107
00:08:42,909 --> 00:08:49,660
so in this function where we get the state, I actually want to return a div and now we know that state
108
00:08:49,660 --> 00:08:56,800
is entering, entered, exiting or exited, we can of course take advantage of this to now manipulate our
109
00:08:56,800 --> 00:08:59,260
style depending on the state.
110
00:08:59,260 --> 00:09:06,360
So for example here, we could say that we want to set the opacity of this element too
111
00:09:06,670 --> 00:09:15,620
and if the state is let's say equal to exited, then the opacity should be zero,
112
00:09:15,640 --> 00:09:17,470
otherwise it should be 1.
113
00:09:17,470 --> 00:09:19,990
Now let's see this in action, if I save this,
114
00:09:20,140 --> 00:09:27,670
now you see that the div is still there, it's taking up its space but it's not visible but toggle it, it's
115
00:09:27,670 --> 00:09:34,540
shown again, if I click toggle again, it disappears after this one second, still we got no animation
116
00:09:34,540 --> 00:09:35,350
right now
117
00:09:35,530 --> 00:09:39,160
but we can see how we can use this transition component,
118
00:09:39,160 --> 00:09:42,920
obviously it would be much nicer to have an animation though.
119
00:09:43,210 --> 00:09:47,610
Now to add this animation, we just need to tweak this a little bit,
120
00:09:47,710 --> 00:09:52,570
we simply have to add the transition property you already learned about and let's say you want to animate
121
00:09:52,600 --> 00:09:54,850
any changes in the opacity property,
122
00:09:54,990 --> 00:09:57,490
you could also use all
123
00:09:57,510 --> 00:09:59,640
so let's go back to opacity though.
124
00:09:59,970 --> 00:10:07,230
Let's say we want to animate this over one second using the same value as we use here in timeout,
125
00:10:07,230 --> 00:10:15,430
1000 milliseconds and we want to do this with these out and all of that should be a string.
126
00:10:15,660 --> 00:10:25,840
If we save this, now if I toggle this, you see it's animated in and animated out.
127
00:10:25,870 --> 00:10:31,450
Now we got one important thing, we're controlling this animation with the transition,
128
00:10:31,900 --> 00:10:35,370
it's still always staying in the dom though
129
00:10:35,650 --> 00:10:40,840
but we can control this by adding more props to the transition component,
130
00:10:40,840 --> 00:10:47,300
we can add mount on enter which simply is a boolean prop which says yeah
131
00:10:47,500 --> 00:10:54,850
if the in property is set to true you should add the wrap element to the dom and on the other end, you can
132
00:10:54,850 --> 00:10:58,090
add unmount on exit to really remove it from the dom
133
00:10:58,150 --> 00:11:04,650
if that's not true. If we now save this, you see no empty space it's gone
134
00:11:04,780 --> 00:11:09,270
but if we now click toggle it's there again, if we click toggle again,
135
00:11:09,370 --> 00:11:10,920
it's removed.
136
00:11:10,920 --> 00:11:15,400
Still no animation due to the way we're controlling this
137
00:11:15,400 --> 00:11:21,730
we're only changing the opacity here when the state is exited, which is to late.
138
00:11:21,730 --> 00:11:27,130
We set this to exiting instead which is entered right at the beginning, we click the toggle button
139
00:11:27,130 --> 00:11:28,770
to remove it,
140
00:11:28,780 --> 00:11:30,730
now you see it fades out.
141
00:11:30,820 --> 00:11:33,450
So now we fixed the issue we had before
142
00:11:33,580 --> 00:11:38,530
we still have an instant animation for showing it because we're not setting the style on that but for
143
00:11:38,530 --> 00:11:44,890
removing it, we're taking advantage of these four different states or actually the two different states
144
00:11:44,890 --> 00:11:47,860
for removing the element, exiting and exited.
145
00:11:48,010 --> 00:11:54,620
And as soon as you start exiting, we already set the opacity to zero and we animate this
146
00:11:54,730 --> 00:11:59,270
but it's not actually removed from the dom until the entire animation,
147
00:11:59,290 --> 00:12:07,810
so this timeout here is over and now we really tell react to only remove this element after the given
148
00:12:07,810 --> 00:12:08,550
period
149
00:12:08,650 --> 00:12:13,660
with the help of this transition component. Now that was a lot of new knowledge,
150
00:12:13,810 --> 00:12:18,020
let's apply this to our modal so that this hopefully becomes a bit clearer.
15778
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.