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,460 --> 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,180 --> 00:08:42,840
but instead in our function here,

107
00:08:42,910 --> 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.