Vue doesn't provide built-in animation methods like jQuery, but

it does make it easier for you to use animation libraries, and

offers a simple way to coordinate transitions.

That is, to create fun animations when certain elements change, enter, or

leave in an app.

Vue saves you time by coordinating the addition and

removal of CSS classes for you.

We can cross another item off of our list.

For this video, I'm going to assume that you have at least

a little bit of knowledge of the CSS transition property.

If you don't, I'll leave some links to some resources in the teacher's notes, but

don't worry about it too much.

The point of this video is not to teach you about CSS transition effects, but

rather, to make you aware of the shortcuts that Vue can provide.

Vue provides us with what's known as a transition component.

These components are beyond the scope of this course,

but they're essentially a way to encapsulate small pieces of functionality

in a way that is reusable and maintainable.

So we'll start by surrounding our card paragraph divs in

the transition component.

You'll notice that it looks a lot like an HTML element.

We also need to give the component a name, I'll show you why in a moment.

We'll name the transition component something descriptive, like flip.

For a visual representation of what we need to do next,

let's visit the Vue.js docs again.

I'm going to go to vuejs.org.

Then to Learn > Guide, and then,

I will scroll down to Enter/Leave & List Transitions.

Then scroll down, and have a look at this diagram.

Vue provides six CSS classes that you can use to write CSS for transition effects.

Vue will then do all the heavy lifting of determining when to add and

remove these classes.

So, if we think about our flipping card, when the user clicks on it,

the front of the card leaves, and the back of the card enters.

Or, on each click,

one side of the card is disappearing as the other side of the card is appearing.

Right now, that's happening instantaneously.

The transition effects we write will control how each card side looks

as it's disappearing or reappearing.

And that's when the enter and leave classes are applied.

We don't need to worry about enter-to and leave-to for our animation, but

these are classes that are applied one frame after an element leaves or enters.

And finally,

the enter active and leave active classes help us control the transition as a whole.

All the options for how long the transition should take,

whether you want to ease the transition, and so on.

Let's go to styles.css.

And you may need to scroll down a bit to get to the classes that control

the transition animation.

Notice that all of the classes start with the word flip.

I could refer to these classes simply as v-enter active or

v-leave active and so on, as we saw on the docs.

But remember when we gave the transition component the name flip?

Because we've given this transition component a name,

Vue automatically knows that classes called flip-enter or flip-leave,

etc., are all classes that I'm going to use with a component named flip.

So if we were to use the transition component again, for

another animation in this template, I could assign it a different name.

And that would help Vue and me differentiate between the two in my code.

The enter active property is how I can control the whole entering transition.

So basically, I'm saying here, when the front or

back of the card enters, I want the effect to last for 0.4 seconds.

Flip enters how I specify it, how I want the element to change.

I want a card side to rotate 180 degrees as it enters.

The opacity of 0 helps the transition look a little smoother, and

prevents you from seeing the card's text backwards as it transitions in.

You can remove that line and have a look, if you're curious.

Finally, when the front or

back of the cart leaves, I want it to just disappear, be removed from the dong.

So I'm setting it to display none.

So that's our CSS, but this won't work quite yet.

Because we're using the transition component on more than one item,

we're using it for two paragraphs, Vue needs a way to tell these two items apart.

To do that,

we need to give a key to the elements we're applying transition effects to.

So, for this first paragraph, I'll add a key attribute named "front".

And for the second paragraph, I'll add a key called "back".

Let's check this out in the browser.

So, I'm no animator, but I think we've got a fairly good-looking flip animation,

each time a card is clicked.

If we open the Elements tab really quick,

we can see that Vue is applying these classes at the right time,

without us having to write any additional JavaScript.