Point we've covered some of the major features of Vue. There are a couple other things that we could go and do, one of those is transitions and animations, as you might want to have your components transition between one another. You have a couple of other things in here that we won't be talking about too much, such as tooling, scaling up internals, migrating and metta, as those concepts are beyond Vue basics, and assume that you're very comfortable with Vue and are ready to use it in a production environment at scale. So, those we may do on another series, but at this point we are not going to be doing too much more of that beyond the basics. So transition and animations, so enter/leave and list transitions. So if we go and look at this under transitioning, I'm under enter/leave list transitions, here's the overview of the state, and all you have to do, it's actually pretty easy, is a wrap a transition with a name, for example, transition name fade PF show, hello at then it's going to run.
And then you can go and set up some CSS rules based on that, so if we click on the toggle, it will fade in. So what I'm going to do is grab this transition named fade, and I'm going to wrap it around my component that we set up in the previous example like that, and then I'm going and include this CSS into my style, that CSS back where we just had the regular box, we just have our new CSS rules. And now if we apply these changes. So here they're showing data true, we need to wrap it actually probably in something that fade-leave below version 2.8, we are on that version, I'm going to say 5.5 seconds, I'm going to change that to one second fade.
And we'll refresh this and see if we can get this to work, might not work based on where we have it set up, we might need to wrap this around the individual component to style it, so let's try that out actually, because it doesn't look like it's going to work on that component the way that was structured. So here's our script tags, I'm going to wrap the components around that, so transition the alert and then the bottom one here, because it looks like this is just going to switch out the Vue and it's not going to run that with the Vue if show. Okay, so now we'll refresh this, and now you see that it faded out, and if we click into each one, there it fades out, now post immediately comes in.
So, let's go and apply that on that one as well. So we'll say transition, and I'm putting it inside the section tag. And now if we refresh, we'll see posts and home, and it'll refresh each one of those as we go, now that timing I extended to point one second, so that it would be a little bit slower so we could see it, but as you can see now, we can add to our transitions. Now transitional classes, you have a couple in here, so there are six classes that apply, v-enter, v-interactive, v-enter-to, v-leave, v-leave-active and v-leave-to. And it gives a little bit of a charts to show you opacity, opacity-one . So v-enter, v-enter-to, and then this whole thing is v-interactive. v-leave is the class of v-leave is at one, and then opacity is at two. And so you can see that transition.
So again, you can set these up here at click button show and transition name, slide and fade. Again these transitions are just getting applied to as classes, and then you can put whatever you want inside of the code. So if I wanted to do slide and fade, I could come back to my code here and where we did the fade, we'll do slide and fade. Then we'll copy over these CSS rules, paste the CSS rules, refresh, and now you see it has that slight fade and slide movement coming in. You see, you have full animations here, if you want it to bounce, here's example of bouncing, I think we have an example of this, so toggle show and it bounces and then disappears. So you can set up additional transformations here or transitions as you go through this, as you can see that sends out. And then you can specify the duration, if you don't want to do it in your CSS, you can say the duration of this animation, the enter and the leave is specifications.
And you have JavaScript hooks that you could go and reference, so quite a bit of animation and options that you have here inside of your elements. So you could say slide fade, I'm going to add a rule in here and just to test it out and I'm going to put in background color. So I'll say that this is red. So now if we refresh this and you can see it's red for just that second. So really it's just adding CSS rules in here for your transitions on however you want to set them up, and these are just CSS transitions. So, again this is all for a second, I'm going to set this for a leave is going to be blue. And on enter and fade-leave-to, I'm going to set to green. This one's all, and this one is translateX. So I think actually it should be fine. Let's go and take a look now.
And so now you can see the transitions that they're taking. You can see that green for just a second and the blue or the red to green, this is the green value and the blue value. So again, you can play with this on how you might maybe want the Audrey to grow and then shrink and then bubble or something like that. You also might want to integrate animate CSS, which is an easy library to working with CSS effects here. As you can see here, we have a series here on code time for animate CSS, so definitely check out that series if you're interested in some more animation effects on how you might apply to some of your transitions and your elements. So again, transition between elements, you can go and take a look at that a little bit further.
So via editing, VLC edit inside of our transition itself. So quite a bit of transitions and options that you have, as you can see here going through that and how you might want to make it. And again, that's all primarily just on transitioning and animating the effects between components, but you want to make sure you get your components set up and working effectively. And here they do say automatically apply CSS, integrates third-party CSS animation, so just animates CSS, and also Velocity.js for some JavaScript animations. So definitely check that out and see what you can make with the animating and transitions inside Vue.