Sometimes, that is what you want. But not in this case. I want to fade it in, in some way. Now, Vue actually makes this fairly easy. We can wrap anything we want to transition within a transition component. Just like this. And let's indent. Next, notice how transition is wrapping an element that is sometimes visible, and sometimes hidden. And that toggling is what triggers, so to speak, the transition itself.

We could give the transition a name, or we could do an end line by declaring and applying a series of classes that will only take effect during certain portions of the animation. Now, that sounds much more complicated than it actually is. So let me show you. Let's say, and just come along for the moment, enter from class. Here's a prop here. What classes should I apply at the beginning of the transition? Well, how about opacity-0? And again, this is a Tailwind class that just sets the opacity to zero. Duh.

And again, this is a tailwind class that just sets the opacity to zero. Duh. And then we're going to say enter to class. What are we transitioning to? How about opacity 100? But now, right now, if we kept things like they are, it's still going to be instant. Let's have a look. So we give it a try. I click add member, and yeah, it's instant. There's no change.

And now I'm going to copy this to both of the props. And I do this because these classes are applied by view conditionally dependent upon where we are in the current state of the transition. So clearly enterFrom describes the classes that should be applied at the beginning of the transition. Where is the starting point? What classes should we apply? Now, on the other hand, enterTo is what classes should be applied when we complete that transition. Okay. So now if we give it a try, add member, yeah, it fades in or transitions in over the course

Okay. So now if we give it a try, add member, yeah, it fades in or transitions in over the course of one second, which admittedly is too long. I only do that to make it crystal clear that it is working. But now notice something. When I close it, we lost that transition. One more time. We faded in over a second, but when I hide it, it's instant. Okay. So now I would have to apply leave classes.

Okay. So now I would have to apply leave classes. So when we remove the element or hide the element, where should we begin from and where should we go to? So often what you'll want to do is the opposite. You might say, okay, well, let's start with these classes and then we're going to end with these classes. And you notice the key thing here is when we fade it out, we start with a hundred percent opacity and we transition to zero. Whereas when we fade it in, we start with zero percent opacity.

But when we leave, maybe we make it even faster. Maybe 150 or 200, something like that. Now my guess is on the screencast, you won't be able to tell, but the mind can tell in real life that it's just a little bit more snappy. Okay. Now there's an additional class called Interactive. So as you can imagine, this represents CSS classes that will be added to the element for the full length of the transition. Not at the beginning, not at the end, but for the full length. So often this is a good place to put your transitions.

Transition duration 200. And now I can remove a little bit of that duplication. Come back and it should still work. And it does. And yeah, when I say I'm being explicit, here's what I mean. Think about this right here. Leave from class. So that would be the starting class when I begin to leave or hide the element. But right now the opacity is 100%. So notice I don't technically need this.

There we go. Goodbye. Okay, so now one last thing before I let you go. This approach here is incredibly friendly to CSS utility classes and frameworks like Tailwind. But if you prefer, you could always apply a name and then create your own CSS classes to declare these states. And here's what I mean. I could say transition name of, how about modal? It doesn't really matter.