- [Instructor] Of course you can animate
using CSS styles and classes,
but View gives you additional features
that makes it easier to animate with transitions.
Now, the first is the transition tag.
Now, it looks like this and it's just an HTML looking tag
with the transition right here.
And, anything you want to animate can be placed
inside this task.
You can say something like animate me here.
And, this transition name is optional.
So, if you get rid of it, you would still get
a set of classes that allow you to target some triggers.
So, that name parameter is optional,
but there are some benefits to using it.
This is going to create a number of classes
which we'll see in just a minute that allow you
to trigger animations based on when those classes
appear and disappear.
Now here are the Enter/Leave classes that you get.
And the default is for them to have this v at the beginning.
If you give the transition a transition name,
then the v would be replaced with whatever you called
the transition.
So, v's the default prefix.
Now there are two events that you're interested in
when animating.
Whether the items you're animating are entering the scene
or leaving the scene.
Then the from option let's you setup the beginning state
of your animation and the two options
let you control the ending frame of your animations.
Finally, the active sequences let you control
how that animation is going to play.
So, this is a good place to set up easing curve.
Let's take a look at some examples
so that you can see what's going on here.
Now here we have a simple button
that you can see right here.
It does have a click event and then,
we're using a variable called "showMe"
to turn that on and off.
So, you can see that the transition isn't currently showing.
If we click on this button, you see an animation
playing from the left.
And if you click on it again, it slides out
to the right, and it's also fading in.
So, you can see that because I didn't name this transition,
it's using the v prefix.
And notice that what it's doing is giving me
a place to start from.
So, here I'm saying when this animation begins,
the opacity's going to be zero.
So, it's going to be invisible.
And I want to transform by moving it
to the left by 200 pixels.
And that's why, when I first click it
it comes from the left over here,
about 200 pixels, and it fades in to the final state.
You can see that it's animating to an opacity of one here.
Now, while the animation is active,
I can control the speed of the animation.
So, I'm saying, control all the animatable elements,
do it in 0.3 milliseconds and then have an easing curve,
ease-out, which means slow at the end.
It's a little faster at the beginning
and slower at the end.
And then, you have the same sort of set of items as well.
For example, you can say start when you click
to leave this animation.
So, when I click on this a second time,
start with an opacity of one, animate to an opacity of zero.
And then, also translate this by 200 pixels to the right.
So, in reality, I don't really need these two
because the opacity of the element is set by default
to be 100% opaque, so I don't really need this middle
sort of part of the transition.
If I didn't mind these transitions having the same
amount of time, I could actually just combine these,
and a lot of times, you'll see them like this.
I can just sort of say, "Well, let them all
"last 3 tenths of a second at the beginning
"and at the end."
And a lot of times, if you don't mind the beginning
and the ending place being the same,
then you can also combine these two.
So, if I was maybe sliding from the top down
and I wanted it to go back up to the top,
then I could probably combine the enter-from
and the leave-to.
And sometimes you will see that working,
but, in this case, I think, it works pretty well
to just combine those two.
Now, there's also a few enter and leave properties
that you can work with.
So, we have an equivalent amount of properties
that we can add, when we want to use some existing classes.
So, if you're using a framework like Bootstrap
or Animate.css, then you can add these properties
right here, and then call a class that exists
in that library.
And you just put that directly in the transition property.
One library that you can use is called animate.css.
Now, surprisingly, this happens to be at animate.style.
If you type in animate.css in your browser
it doesn't send you to the right place.
So, you have to go to the animate.style website.
And there are others that you can use like GreenSock
and other animation libraries.
So, you can find a link to animate.css
at animate.style.
And let's check out how something like this
will let us create animations.
So, notice that I don't have any css anymore.
All I'm doing here is using the animate.css classes.
And if I hit "Go" here, you can see a little bit
of an animation.
If I click on it again, we get a different rotation.
And all I'm doing is using the enter-active-class
and the leave-active-class here, and then calling in some
animations from animate.css.
Now, if you want to know, I did go into CodePen.
And I did add into the css section,
a call to this animation library.
So, make sure that you do that if you're starting
from scratch or just add it into your script file
in order to make this work.
Now there's also some Java script hooks that you can use.
So, if you want to control these things
with Java script, you would do something similar.
You would add the hook to the transition tag,
and then, you would call in any method
that you wanted to execute.
So, you can see that there's a full set of events
and they're pretty similar to what we have done
before you have the before-enter, the enter,
and then after-enter.
There's a couple of additional hooks that you can use
in case the animations are being canceled in your scripts.
Now, in your scripts, the events will also
automatically receive an element, which you can use
to do things with.
So, the element, essentially, that you click on
will also be passed along.
Ans optionally, you'll also get a done call back
in certain instances.
Now, let's check this out.
And here, you can see that I have pretty much
the same animation that I did before,
except that now when the animation plays,
depending on the state of the animation,
my button is changing colors.
If you see what's happening, I have a bunch of different
calls to different transition methods.
So, these, essentially, are like events.
And whenever the animation enters the transition,
I'm going to switch to a transition color method,
which is this right here.
And here, I can just change the variable btnColor,
which will control the class that I apply to this button.
So, this is using btn-warning.
So, when I click this, it's going to switch to yellow
and then, when it finishes the animation,
it'll turn back to gray.
So, when it reaches, kind of the middle of the animation,
it'll go green.
And then, when I click to animate out,
it'll be yellow while the animation is playing,
and then it'll go back to gray.
So, you can see that whenever I execute.
So, after the animation leaves, it resets the color,
running this resetColor method here.
Whenever I start to leave, I use the transition color,
and then when I'm entering, I also use the transition color.
And after the animation starts entering the screen,
then I use the successColor as well.
And, you can even output, or console.log the element
if you wanted to do something with that as well.
If you want to learn more about animations,
make sure you check out the documentation at this URL.
All right, so let's take a look at a problem
and solution so that we can check this out in context.
So, if I click on this, this is pretty much what we did
in the last video, just a shopping cart.
And as you click on items, they get added into this section.
And we're going to work on animating this dropdown menu.
So, let's take a look at what the solution works like.
And you'll see that what I've done here is added
animation to this dropdown button.
And if you look carefully, the color of the dollar amount
here is also going to change.
And it's going to change back to its original color
once the dropdown disappears.
So, let's go ahead and take a look at what we need to do
here so you can find the difference between the two
if you're following along.
And, what we want to do is animate the cart dropdown
using the transition tag.
And also we'll add a name property to the transition tag
so that we get the custom classes that we can use.
And we're going to make the total red whenever the dropdown
is coming down.
So, to do that, let's go back into the problem here.
And we'll make this a lot bigger.
And, we're going to get started by creating some variables.
So, here in the data section, I'm going to create
a variable called "show" and set that to true.
I'm also going to create a button color variable.
And I'll set that to btn-success.
And finally, I'm going to also create a color for the total.
So, totalColor, set this to text-secondary.
And now that I have my variables,
let's make sure that I add a comma to this one.
I'm going to create the transition section.
So, that is going to go around my dropdown.
So, right here, I'm going to use the transition tag.
And I'm going to give it a name of "dropdown."
So, this is going to be the name that's going to get added
to my classes.
And I'm going to close things right here.
In my transition, I'm going to add some events as well.
So, I'll do an enter event.
And this is going to run something called "transitionColor."
And then we'll do an after-leave hook right here.
This is going to run "resetColor."
Let's go ahead and move these over.
So now, I'm also going to need to make some methods
in the Java script section.
I have computer properties.
Here's my methods.
So, I will do one for the transitionColor.
Now, remember this can pass along an element.
I don't really have to have that there, but.
Let's see, this is going to take the variable
called this.totalColor
and set it to "text-danger" here.
And then, we will do another one for resetColor.
And we need a comma right here.
This is going to be changing the value of the variable
we create, it's called totalColor to text-secondary.
All right, so now we have the events
that are going to trigger those methods.
The transition property with a name.
And we need to do a couple of more changes here
in this section.
I need to make sure that the total is going to use
the class that we created called totalColor.
So, that will track that element.
And now, we need to create our CSS that it's going to apply
those animations.
So, for this, we'll create a dropdown.
Remember that because we named the transition dropdown,
instead of v, we're going to get a class called dropdown
and the the different classes.
So, we can say enter-active.
And we're going to call dropdown-leave-active.
And this is going to set up the transition.
So the active class, this is where we set up,
sort of, the intermediate animation.
Animating everything by half a second.
And we'll use the ease-in-out.
We'll go ahead and set this to transform, auto.
And then, we'll need to do the from.
And just remember, this is going to be a dropdown
from the top down.
So, the beginning and ending positions can be the same.
So, we'll do the dropdown-enter-from,
and dropdown-leave-to.
We'll change the opacity so that at the beginning,
the opacity will be set to zero.
And then transform will be set to translateY,
which means move from the top by 300 pixels here.
All right, let's see if this is working.
So, we'll add some items.
And then, when this is clicked, this is changing
to the right color.
And the dropdown is working, but it is a little bit annoying
because the animation is kind of happening
on top of everything.
So, we're going to need to add an additional item
to hide everything.
So, that's just going to be an additional div.
And we'll need a class for it as well.
Let's go ahead and create the class first.
So, in here, I'm going to create a class
called dropdown-clip.
And this is just going to set the overflow to hidden.
And then, I just need to wrap a div.
So, right before the transition, we're going to do
a div here.
And the div will have a class of dropdown-clip.
And we'll just put the other closing one
underneath this transition here.
And now, if we add things, we have to wait
'til it reloads, but if we add things,
the animation plays.
And because we're clipping things,
the dropdown will appear and disappear underneath.
And notice that the text is also changing to red.
And then, when the dropdown disappears,
it'll change back to gray.