1
00:00:02,130 --> 00:00:08,680
So we want to be able to show or hide the modal and in general, when working with animations in

2
00:00:08,680 --> 00:00:11,610
react apps, we've got multiple ways of doing that.

3
00:00:11,680 --> 00:00:18,270
The easiest and straightforward way is a way which has nothing to do with react, using css transitions

4
00:00:18,280 --> 00:00:19,690
and animations.

5
00:00:19,690 --> 00:00:25,910
Let me show this at the example of the modal, let's say we want to have it flying from the top and also

6
00:00:25,930 --> 00:00:29,920
change the opacity and do the same when we close it,

7
00:00:29,920 --> 00:00:40,390
we can do this by setting the opacity to one if modal open is attached and by using the transform

8
00:00:40,390 --> 00:00:48,670
property to translateY which slides it on the y axis by 0.

9
00:00:48,670 --> 00:00:51,750
So with this basically says use the position

10
00:00:51,790 --> 00:00:52,930
it should have,

11
00:00:52,930 --> 00:00:56,230
by the way we positioned it in our html code

12
00:00:56,230 --> 00:00:58,890
so the default position in this case.

13
00:00:58,990 --> 00:01:02,120
Now we can attach the same to modal closed,

14
00:01:02,230 --> 00:01:05,300
but now here opacity would be 0 and translateY

15
00:01:05,310 --> 00:01:13,090
could be -100% to move it up by 100%

16
00:01:13,120 --> 00:01:15,830
when we have the close class attached.

17
00:01:15,970 --> 00:01:25,300
Now if we save this and I click open modal and I click dismiss, we see no difference, now let's actually

18
00:01:25,480 --> 00:01:33,370
also add a transition property to the modal and this is a default css property which allows us to

19
00:01:33,370 --> 00:01:40,210
specify some css properties which should not be applied instantly but instead be animated over time,

20
00:01:40,210 --> 00:01:42,930
again this has nothing to do with react.

21
00:01:43,090 --> 00:01:46,930
And here we could say we want to transition all properties

22
00:01:46,960 --> 00:01:54,640
so no matter if we changed the opacity or we transform this, we want to animate this then we can define

23
00:01:54,640 --> 00:01:55,250
the length

24
00:01:55,270 --> 00:01:58,090
so let's say we want to do this over .3 seconds,

25
00:01:58,120 --> 00:02:05,350
you could also type 300 milliseconds and all the details about transitions can be found in an article

26
00:02:05,350 --> 00:02:07,150
linked at the end of this module,

27
00:02:07,150 --> 00:02:12,080
this is just a quick introduction this is of course not a css course.

28
00:02:12,090 --> 00:02:18,730
So over .3 seconds and then we can define a timing function like ease-out which defines basically

29
00:02:19,000 --> 00:02:21,810
how the animation is distributed over that time,

30
00:02:21,880 --> 00:02:27,940
you could use linear to always move at the same speed but with ease-out, you actually make sure that

31
00:02:28,000 --> 00:02:31,010
you start faster then you end.

32
00:02:31,480 --> 00:02:36,700
Now with that we make sure that we want to animate this, if we now save this file and we go back and

33
00:02:36,700 --> 00:02:37,220
click open

34
00:02:37,240 --> 00:02:39,260
modal and dismiss it,

35
00:02:39,370 --> 00:02:41,820
we see the same as before.

36
00:02:41,860 --> 00:02:49,330
The reason for this is that we also change display, display block and none, this basically prevents any

37
00:02:49,330 --> 00:02:55,630
animation from happening with transition because css doesn't recognize that it makes sense to animate

38
00:02:55,630 --> 00:03:01,410
it because to css, it's hidden anyways by default and then it's instantly shown

39
00:03:01,420 --> 00:03:07,000
so why animate anything in between, it would have been hidden until the animation ended anyways and

40
00:03:07,000 --> 00:03:10,370
the display property can be transitioned.

41
00:03:10,810 --> 00:03:15,530
So let's instead remove display here, like this,

42
00:03:15,550 --> 00:03:16,500
if we now go back

43
00:03:16,510 --> 00:03:18,430
we still don't see the modal but if I click

44
00:03:18,450 --> 00:03:22,830
open modal you see it slide in, if I dismiss it it slides out.

45
00:03:23,020 --> 00:03:30,820
The reason for this effect is that by default the modal now has this opacity of 0 since the modal close

46
00:03:30,820 --> 00:03:38,880
class is attached if the show property is false and it is false as long as we haven't clicked the open modal

47
00:03:38,960 --> 00:03:39,910
button.

48
00:03:40,240 --> 00:03:42,820
So therefore we now got this nice animation

49
00:03:43,030 --> 00:03:49,670
and now here is one important takeaway, animating it like this is perfectly fine

50
00:03:49,750 --> 00:03:56,860
and for this kind of animation, that might be the best possible solution even because you're using native

51
00:03:56,860 --> 00:04:00,770
css features which tend to be quite well-performing

52
00:04:00,940 --> 00:04:04,920
and if you don't need more control than that, you've got all you need here,

53
00:04:04,990 --> 00:04:07,750
we got animation for opening and closing the modal.

54
00:04:07,900 --> 00:04:09,390
So that's an important takeaway,

55
00:04:09,400 --> 00:04:16,120
css transitions as you'll learn them in any css course you might've taken are a fine way

56
00:04:16,120 --> 00:04:18,950
of animating a lot of things in css

57
00:04:19,030 --> 00:04:24,660
and actually, we're also using a css transition in our course project for the modal.

58
00:04:24,670 --> 00:04:30,410
Still I want to dive into some other options and also limitations of css transitions,

59
00:04:30,610 --> 00:04:32,370
so let's see what else we can use.