Now that we've extracted the model into a separate component, we can add new features to it, like transitions. That's what I wanna do. Now, first I want to add a transition for both the backdrop and the model itself. And then we kinda split it up and use different animations for it. In our model component, I'm gonna use a transition component, which is also built into Vue, just like the teleport component.

component, which is also built into few, just like the teleport component. So I'm gonna start with transition and wrap it around our diff. And then the transition component accepts six properties. Three that define what the end enter animation looks like, and three that define what the leave animation looks like. I'm gonna start with enter. We have enterFromClass, enterToClass and enterActiveClass.

We have enter from class, enter two class and enter active class. Let's start with the first one. We wanna start with opacity zero. We don't wanna see anything. And then we wanna transition to opacity 100 where we see everything. And this third one defines what classes should be active during this transition. So that should be transition and a duration. And normally you would go for something like 200 or 300,

So that should be transition and a duration. And normally you would go for something like 200 or 300, but, but in this case, I'm gonna start with 1000 so you can really see this animation. Then we have three leave classes, which are actually just the opposite of this. So we have leave-from class. So we are leaving from opacity: 100 where we see everything and we are transitioning to opacity: 0 where the modal fades away.

and we are transitioning to opacity zero where the modal fades away. And actually the leave active gloss is just the same transition duration thousand. Now you might wonder why I need to define both an enter and a leave active gloss. This is because you can use different durations, for example, uh, for enter and for leave, so that it's just a little bit snappier when the modal goes away, let's go

and for leave, so that it's just a little bit snappier when the model goes away, let's go to the browser and see what it looks like. Let's refresh the page, hit edit the model, and now you can see the model and the backdrop fading in. Let's hit cancel. And there it goes. So that's already really nice, but now I want to split it up. I think this animation is nice for the backdrop, but the model itself should zoom in a little bit.

I think this animation is nice for the backdrop, but the model itself should zoom in a little bit. So let's split it up. Now the first thing to notice is that this v-show is a requirement for the transition component to work because it needs an element that leaves and enters the DOM. I'm gonna copy this v-show and also use it on our backdrop and on our modal div. And I'm gonna grab the transition itself and wrap it around our backdrop.

And I'm gonna grab the transition itself and wrap it around our backdrop. It it safe, so it reformats. So I think this transition is fine for the backdrop. Let's copy it again and let's wrap it around the modal diff. And like I said, I think fading in and out is fine for the backdrop, but the model itself should zoom in and out a little bit and we could use scale for that. So again, normally you would use something like scale(90),

and we could use scale for that. So again, normally you would use something like scale(90), but now I'm gonna use scale(50), so you can really see the effect. Uh, so from scale(50), we're gonna animate to scale(100) and do the opposite for leaving from scale(100) to scale(50). Yeah, that's it. And then we can remove most of the properties from our outer transition. So we can remove opacity. We can remove the enterActive class,

So we can remove opacity. We can remove the enterActive class, and from the leaveActive class, we're gonna remove transition, but we're gonna leave this duration. When this feeShow evaluates to false, it'll immediately hide this div from the DOM, including the backdrop and the model itself. So with this duration 1000, we'll say just wait a little bit until these two are completed.

So with this duration thousand will say just wait a little bit until these two are completed, and then we'll hide the outer diff as well. Let's go into the browser and see what it looks like. Let's refresh. Edit a model. And there you can see it's zooming in. Let's hit cancel. And there it goes. So this is a bit over the top of course, so I'm gonna replace scale 50. We had scale 90. Yeah, that looks much better.

We had scale 90. Yeah, that looks much better. Now I'm also gonna refer the duration thousand and set it to 300. And this looks great. This is something that you would actually use in production. Alright, let's go to the next one.