1
00:00:02,190 --> 00:00:07,420
Now we had a look at CSSTransition at this component in the last lecture, there

2
00:00:07,450 --> 00:00:14,850
I explained that we set up this base class name, this trunk of our css classes and the CSSTransition

3
00:00:14,850 --> 00:00:20,540
component would then automatically expand this to a couple of different css classes

4
00:00:20,550 --> 00:00:22,710
and that's the case. For some reason,

5
00:00:22,710 --> 00:00:29,160
you could also want to make sure that you still use modal open and modal closed, so that you essentially

6
00:00:29,160 --> 00:00:32,910
don't have to define these classes. For that reason,

7
00:00:32,910 --> 00:00:36,290
you cannot only pass a string with your trunk

8
00:00:36,360 --> 00:00:38,140
here to classNames,

9
00:00:38,340 --> 00:00:46,620
you can also pass a javascript object and in this object, you can manually define various css classes

10
00:00:46,620 --> 00:00:49,770
that should be used for the different hooks.

11
00:00:49,890 --> 00:00:53,320
So there in this object you passed to class name,

12
00:00:53,340 --> 00:01:04,950
you can define enter, enter-active, exit and exit-active and there actually are two more, appear and appear-

13
00:01:04,950 --> 00:01:07,550
active which you don't have to define,

14
00:01:07,560 --> 00:01:10,420
they also would have been added to your trunk.

15
00:01:10,650 --> 00:01:16,080
These are used, so appear and appear-active is used for the first time something is rendered to the dom

16
00:01:16,200 --> 00:01:19,590
not when doing it conditionally by rendering it,

17
00:01:19,590 --> 00:01:21,710
for example upon a button click or not

18
00:01:21,840 --> 00:01:28,680
but if you hardcoded it into the dom like in our app.js, the h1 and the button, so if it's always

19
00:01:28,680 --> 00:01:34,200
there but if the application loads, that's of course the first time this gets mounted to the dom and

20
00:01:34,200 --> 00:01:39,190
you could animate this with appear. But appear is not what I want to focus on here,

21
00:01:39,300 --> 00:01:46,830
instead if you say for enter, I don't want to attach anything then you wouldn't have to define it or

22
00:01:46,830 --> 00:01:50,160
you just define an empty string, for enter-active,

23
00:01:50,160 --> 00:01:56,790
you could now define the specific css class you want to add like modal open and then with that, you can

24
00:01:56,790 --> 00:02:03,050
break out of this schema of having a trunk and then -enter, -enter-active and so on.

25
00:02:03,390 --> 00:02:10,290
So with this set up you can define your own css classes which should get added or should get used,

26
00:02:10,710 --> 00:02:12,840
modal close this is the closing class.

27
00:02:13,140 --> 00:02:20,150
And with that if we save this and we now open the modal, you see we get the same animations as before

28
00:02:20,220 --> 00:02:22,710
but now we're using our own css classes.

29
00:02:22,710 --> 00:02:28,970
So that's a tiny addition, this is some flexibility you have to really fine tune this to your needs.