In our fade transition component, we're using View's built-in transition classes in order to style whatever appears in the slot. However, there's another way of going about this. That is, instead of targeting View's built-in classes, we can tell View which classes we want applied at these different stages. That's done with props on the transition component.
Each of these different pieces of the transition lifecycle has a corresponding prompt that ends with dash class. So if I want to customize what classes appear on the interactive state, then I provide the following prop. Interactive class. Then any classes you provide here, Vue will put on the element when that interactive state is in effect.
Using this approach is probably quite comfortable if you're familiar with a CSS framework like Windy CSS or Tailwind CSS that provides utility classes for doing things you would normally do directly inside of normal css i've just so happened to install tailwind before i recorded this video so let's try to get the same exact fade transition working now but with tailwind instead so here on fade interactive i do have the interactive class already provided so now we just need to recreate these rules here now honestly i'm not sure how transform origin got on here I think it might have something to do with me copying and pasting from the pop transition there, but it's not really necessary for this transition. So now we need to use classes to recreate the transition opacity here. In Tailwind, that's the class transition-opacity and duration 500. Excellent.
And I believe by default the easing curve is ease with Tailwind, so we don't have to provide a class for that. Now I'm going to duplicate this line and also apply the same exact classes for the leave active state. That is one downside of providing the custom classes ourselves, is we do end up having some repeated lines like this, because we have to target both of these different states separately, even though we're applying the same classes. Great.
That takes care of all these rules right here. I'll just delete those. And then the last thing we need to do, is set opacity to zero on the enter from and leave two states. Awesome.
That takes care of all of these. Now we can remove our style section altogether, and the name no longer has any use as we're not targeting anything with CSS. So let's just remove that as well. Perfect.
Over on the right hand side, if I hit the toggle button, the fade transition works just the same. To conclude, while I used Tailwind CSS in this video, this approach of providing the different classes can also pair greatly with a lot of other CSS frameworks. It just totally depends on how the framework of your choice handles some of these things. Finally, it's worth mentioning that you could bind these classes with dynamic values and not just plain strings.
They work just like any other prop for any other component. But we don't have that in place so the plain strings work great for us. I've seen plenty of people use this approach that we learned in this lesson as well as plenty of people who just prefer doing the CSS in the style section. So choose whichever approach works best for you.
In our fade transition component, we're using View's built-in transition classes in order to style whatever appears in the slot. However, there's another way of going about this. That is, instead of targeting View's built-in classes, we can tell View which classes we want applied at these different stages. That's done with props on the transition component.
Each of these different pieces of the transition lifecycle has a corresponding prompt that ends with dash class. So if I want to customize what classes appear on the interactive state, then I provide the following prop. Interactive class. Then any classes you provide here, Vue will put on the element when that interactive state is in effect.
Using this approach is probably quite comfortable if you're familiar with a CSS framework like Windy CSS or Tailwind CSS that provides utility classes for doing things you would normally do directly inside of normal css i've just so happened to install tailwind before i recorded this video so let's try to get the same exact fade transition working now but with tailwind instead so here on fade interactive i do have the interactive class already provided so now we just need to recreate these rules here now honestly i'm not sure how transform origin got on here I think it might have something to do with me copying and pasting from the pop transition there, but it's not really necessary for this transition. So now we need to use classes to recreate the transition opacity here. In Tailwind, that's the class transition-opacity and duration 500. Excellent.
And I believe by default the easing curve is ease with Tailwind, so we don't have to provide a class for that. Now I'm going to duplicate this line and also apply the same exact classes for the leave active state. That is one downside of providing the custom classes ourselves, is we do end up having some repeated lines like this, because we have to target both of these different states separately, even though we're applying the same classes. Great.
That takes care of all these rules right here. I'll just delete those. And then the last thing we need to do, is set opacity to zero on the enter from and leave two states. Awesome.
That takes care of all of these. Now we can remove our style section altogether, and the name no longer has any use as we're not targeting anything with CSS. So let's just remove that as well. Perfect.
Over on the right hand side, if I hit the toggle button, the fade transition works just the same. To conclude, while I used Tailwind CSS in this video, this approach of providing the different classes can also pair greatly with a lot of other CSS frameworks. It just totally depends on how the framework of your choice handles some of these things. Finally, it's worth mentioning that you could bind these classes with dynamic values and not just plain strings.
They work just like any other prop for any other component. But we don't have that in place so the plain strings work great for us. I've seen plenty of people use this approach that we learned in this lesson as well as plenty of people who just prefer doing the CSS in the style section. So choose whichever approach works best for you.