- [Instructor] Vue.js gives you a great way
of animating objects and it's called transitions.
So let's take a look at how they work.
And what we want to do is animate the appearance
and disappearance of this element
that we created a toggler for earlier.
So let's go ahead and hide this navigation.
And we're going to focus on this section right here.
So to create an animation or a transition
we have to use a transition tag here.
And we'll need to close it out where
we want the animation to stop.
And then we'll have to give it a name as well.
So I'm going to call this one fade.
And in addition to that we have to provide
a sort of toggling function.
So we'll create another div here.
And this div is going to have a v if statement
that tracks the value of a variable called sliderStatus.
So if you remember we created that variable earlier
and what it does is show or hide this thing
if the value of this variable is true or false.
So we need to go ahead and finish up the code here.
And close out the div.
Let's indent this a little bit better.
And this is pretty much what creates an animation,
although nothing is really being animated
'cause we haven't specified the CSS
to animate these elements with.
But it's actually working.
Let's take a look here in this CSS section
that we haven't used before and add some animation code.
So we'll say, using our name fade,
we want to do something when this element begins
to animate when it enters the screen sort of.
And what we want to do here is set
the opacity of this element to zero, right.
And then we need to do something,
again with the name that we created when this element
is active and available for users.
So that gets a fade-enter-active class.
Again it's just whatever name we gave it plus enter-active.
And here we define how the animation is going to be played out.
So we'll say transition.
We'll animate everything.
We could type in here opacity if we wanted to,
but I'll just type in all, it's sort of a great shortcut.
It's going to take one second and it's going to have
a transformation function of ease-in-out.
That just makes it place low
at the beginning and at the end.
All right, so let's see if we did everything correctly.
And you can see that now, this fades in.
And it doesn't fade out but it does fade in
when we click on this.
You can see it takes a second for the opacity to show.
And that's pretty cool.
Let's go ahead and handle the fade out.
To do that we need to add a couple more classes.
So in addition to fade-enter-active,
we'll do a fade-leave-active.
Again, the name plus some of these special properties,
I'll show you where to find those in just a minute.
And then we'll do a fade-leave-to here.
It needs to be a class.
And now this will animate as it appears,
or it fades as it appears and disappears.
That's pretty cool.
So you might be wondering what is going on
that is causing all that to animate.
So what Vue.js is actually doing is
injecting some of those classes.
And you can see them by going to your preview
and selecting Inspect.
And you have to really pay close attention
to what's happening.
And we got to scroll to the right section so let's see
if we click on this, take a look over here on this section.
And see if you can see the classes
appearing and disappearing.
I'm going to do it again because it really does it fast.
We can see fade-leave-active like all those classes
that we talked about are being injected through
that time that we specified, and then deleted
as the animation starts and finishes playing.
So those special names that you have to know
fade-enter or fade-leave-to, all these other ones,
are all listed at this URL.
And you can see that there are actually several of them,
these transition classes are right here.
And you can play around with them.
Here it explains what they do.
And it's an easy way of adding some simple
animations with just a couple of tags.
That lets you do all kinds of animations easily on your app.