1
00:00:02,210 --> 00:00:07,620
In the last lecture we use the transition component to see how it works and how we can use to control

2
00:00:07,630 --> 00:00:10,590
whenever an element is removed or shown.

3
00:00:10,590 --> 00:00:16,010
Let's now use this transition component on the modal to animate this,

4
00:00:16,020 --> 00:00:24,480
so for that I'll again add my transition component down there, opening and closing and in-between as we

5
00:00:24,480 --> 00:00:31,050
learned, we will get a function where we get this state arguments which is entering, entered, exiting or

6
00:00:31,050 --> 00:00:32,180
exited.

7
00:00:32,580 --> 00:00:37,550
Now we also find what should be rendered in-between, in-between

8
00:00:37,660 --> 00:00:39,770
I want to render my modal

9
00:00:39,970 --> 00:00:44,060
so I'm going to cut this out here and enter it right there.

10
00:00:44,110 --> 00:00:51,970
We can remove this check below that, I will leave this check for the backdrop because I want to still show

11
00:00:51,970 --> 00:00:57,220
or hide the backdrop just like this without an animation therefore I can also just set a show like this

12
00:00:57,220 --> 00:00:59,080
to true always because it's removed

13
00:00:59,080 --> 00:01:05,790
anyways if I don't want to show it. Back to the modal, there we now want to control this transition so I'll

14
00:01:05,860 --> 00:01:11,330
set the in property to this state and then ModalIsOpen,

15
00:01:11,380 --> 00:01:20,830
if that's true then the element returned here in this function should be shown or treated as entered.

16
00:01:20,870 --> 00:01:28,070
I want to do this let's say with the timeout over 300 milliseconds,

17
00:01:28,070 --> 00:01:35,360
now what I can do is I can pass the state and with that, I mean this animation state stored in this

18
00:01:35,360 --> 00:01:41,410
argument into the show property in the modal. Inside the modal,

19
00:01:41,450 --> 00:01:45,710
I then can take advantage of this to still attach different classes,

20
00:01:45,710 --> 00:01:54,080
however what I will do here is I will check if props.show is equal to entering which is attached right

21
00:01:54,080 --> 00:01:57,210
at the start when we click this toggle modal thing,

22
00:01:57,260 --> 00:02:04,230
then I want to play the modal open animation otherwise, for that I'm going to split this over multiple

23
00:02:04,230 --> 00:02:11,660
lines, otherwise I want to check whether props.show is equal to exiting,

24
00:02:12,000 --> 00:02:19,640
in this case I would like to play or add the modal closed class,

25
00:02:19,770 --> 00:02:23,250
in all other cases, no css class will be added.

26
00:02:24,160 --> 00:02:30,850
If we now save this and we go back to our application, if I click open modal, you see the animation is played

27
00:02:30,850 --> 00:02:37,540
for showing it and also for dismissing it. And still what I can do is an app.js,

28
00:02:37,660 --> 00:02:42,870
I can also if I just split this over multiple lines to have an easier time reading this,

29
00:02:42,910 --> 00:02:50,230
I can also still add mountOnEnter and unmountOnExit here to really get rid of it and still if I click

30
00:02:50,680 --> 00:02:56,380
open modal, I get the animation, the same for removing it because now we're taking advantage of this transition

31
00:02:56,380 --> 00:03:03,370
property which simply adds a delay before it is removed from the dom which gives us the time to play

32
00:03:03,370 --> 00:03:10,300
our animation due to the state we get and due to us using this state inside the modal component,

33
00:03:10,420 --> 00:03:17,860
here where I check where we're sitting which is the state right before it's removed from the dom. And

34
00:03:17,860 --> 00:03:19,560
therefore unlike before,

35
00:03:19,690 --> 00:03:21,850
this is now not happening too late.