1 00:00:02,240 --> 00:00:08,540 So over the last lectures, we learned a lot about transition. Now sometimes you don't want to control the 2 00:00:08,540 --> 00:00:14,180 transition as we do here where we get this function with the state and where we then manually attach css 3 00:00:14,200 --> 00:00:18,000 classes or change the style. We can of course do this, 4 00:00:18,030 --> 00:00:24,290 we are doing this in both the app.js file and our modal.js file 5 00:00:24,530 --> 00:00:30,530 but sometimes you just want to have a couple of predefined css classes for the different animation states 6 00:00:31,040 --> 00:00:35,760 and you want to make sure they get attached depending on the state of the animation. 7 00:00:35,840 --> 00:00:41,130 Essentially what we're doing here manually would be nice if that would be managed automatically 8 00:00:41,420 --> 00:00:47,290 and turns out the package we're using has a special css transition component, 9 00:00:47,360 --> 00:00:51,100 so let's import that from the css transitions subpackage 10 00:00:51,140 --> 00:01:01,860 and let's also use it then here in our jsx code. Css transition doesn't use any function in-between 11 00:01:01,860 --> 00:01:03,200 the tags, 12 00:01:03,210 --> 00:01:10,150 instead you just enter the jsx code you want to output, like that. Class name 13 00:01:10,140 --> 00:01:13,400 therefore now can be set back to modal. 14 00:01:13,570 --> 00:01:15,560 Right now, this wouldn't have any animation 15 00:01:15,570 --> 00:01:22,740 we just have this css transition element, if we now go back to the application and we click open modal, 16 00:01:22,740 --> 00:01:26,010 now we actually even get this error right now if we're using it. 17 00:01:26,010 --> 00:01:35,310 The reason for this error is due to the way this component works, we need to add a special property to the 18 00:01:35,340 --> 00:01:42,510 css transition component which is called classNames, not className as we use it on other properties, 19 00:01:42,870 --> 00:01:51,730 classNames because here we define which css classes should be added to the wrapped element, 20 00:01:51,750 --> 00:01:56,280 so to this div depending on the state of the transition. 21 00:01:56,460 --> 00:02:03,510 It will always keep the classes we had on the element like modal in our case but then merge these new 22 00:02:03,510 --> 00:02:05,060 classes with that. 23 00:02:05,070 --> 00:02:07,770 Now what are these new classes though? 24 00:02:08,030 --> 00:02:16,050 We can define the trunk of these classes so to say, for example we could name this fade-slide and 25 00:02:16,050 --> 00:02:18,420 you can use whatever you want. 26 00:02:18,420 --> 00:02:25,140 Now what this will do is that the css transition component will automatically cycle through a couple 27 00:02:25,140 --> 00:02:31,890 of css classes and merge them to the div here, the div it wraps or any element it wraps of course 28 00:02:32,310 --> 00:02:36,480 depending on the state of the css transition or of the transition 29 00:02:36,480 --> 00:02:42,080 in general. The classes it cycle through are your trunk, 30 00:02:42,120 --> 00:02:48,150 so fade-slides in our case and then -enter which is attached right at the point of time it starts 31 00:02:48,210 --> 00:02:54,110 entering, enter-active which will be kept attached whilst it is in the entering mode, 32 00:02:54,210 --> 00:03:01,860 so in our case whilst it is running through this duration of 400 milliseconds, the -entered 33 00:03:01,860 --> 00:03:10,170 class on the other hand will be removed right after one frame and we also got -exit which is attached 34 00:03:10,180 --> 00:03:14,010 right when we start exiting and exit-active, 35 00:03:14,400 --> 00:03:22,070 so it's our job to now add these various classes to our application in any global css file or a file 36 00:03:22,140 --> 00:03:27,250 scoped to this component where we want, in our case I'll add it to modal css. 37 00:03:27,420 --> 00:03:33,090 So there I will add .fade-slide.enter class, 38 00:03:33,450 --> 00:03:43,720 then I'll add fade-slide enter-active class then I'll add fade-slide exit class and then a fade-slide 39 00:03:43,860 --> 00:03:44,720 exit-active 40 00:03:44,920 --> 00:03:53,610 class. These are now all the classes I can define and fill with life and which will get added to 41 00:03:53,610 --> 00:03:55,390 the wrapped element to this div 42 00:03:55,410 --> 00:03:59,560 in our case depending on the state of the transition. 43 00:03:59,590 --> 00:04:03,770 Now back in our modal.css file, we got animations already 44 00:04:03,780 --> 00:04:08,160 so let's take the animation for opening a modal and we now could add it to fade-slide 45 00:04:08,180 --> 00:04:09,840 enter or enter-active, 46 00:04:10,200 --> 00:04:15,900 as I mentioned, enter as well as exit will be removed after one frame. 47 00:04:15,900 --> 00:04:22,440 We can use these classes to do some initialization, like for example set the opacity to 0 at the start 48 00:04:22,440 --> 00:04:29,190 of the animation but enter-active and exit-active is where we then play the actual animation, so it 49 00:04:29,190 --> 00:04:34,410 is here that I add the animation property and the same for the closing, 50 00:04:34,410 --> 00:04:41,000 I'll add it to exit-active. I'll leave the two classes empty and we could of course therefore remove them. 51 00:04:41,400 --> 00:04:46,680 Now with that if we save all files and we go back to the application, if I click open modal, 52 00:04:46,950 --> 00:04:54,450 we're playing the animations from before again but now we don't manually have to assign css classes and 53 00:04:54,450 --> 00:04:56,550 join them together, instead 54 00:04:56,550 --> 00:05:03,870 now we're taking advantage of the css transition component which moves through these css classes 55 00:05:03,870 --> 00:05:11,150 based on our trunk automatically. And therefore you often find yourself using css transition, 56 00:05:11,160 --> 00:05:17,700 it often is the more convenient component to use since you can control the entire animation in css 57 00:05:17,700 --> 00:05:21,640 code by simply defining these css classes.