Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Get a crash course in using Vue's transition component to animate the flashcard flip.
-
0:00
Vue doesn't provide built-in animation methods like jQuery, but
-
0:03
it does make it easier for you to use animation libraries, and
-
0:07
offers a simple way to coordinate transitions.
-
0:09
That is, to create fun animations when certain elements change, enter, or
-
0:13
leave in an app.
-
0:15
Vue saves you time by coordinating the addition and
-
0:18
removal of CSS classes for you.
-
0:21
We can cross another item off of our list.
-
0:25
For this video, I'm going to assume that you have at least
-
0:27
a little bit of knowledge of the CSS transition property.
-
0:31
If you don't, I'll leave some links to some resources in the teacher's notes, but
-
0:35
don't worry about it too much.
-
0:37
The point of this video is not to teach you about CSS transition effects, but
-
0:41
rather, to make you aware of the shortcuts that Vue can provide.
-
0:45
Vue provides us with what's known as a transition component.
-
0:50
These components are beyond the scope of this course,
-
0:52
but they're essentially a way to encapsulate small pieces of functionality
-
0:57
in a way that is reusable and maintainable.
-
1:00
So we'll start by surrounding our card paragraph divs in
-
1:05
the transition component.
-
1:22
You'll notice that it looks a lot like an HTML element.
-
1:26
We also need to give the component a name, I'll show you why in a moment.
-
1:30
We'll name the transition component something descriptive, like flip.
-
1:36
For a visual representation of what we need to do next,
-
1:38
let's visit the Vue.js docs again.
-
1:42
I'm going to go to vuejs.org.
-
1:47
Then to Learn > Guide, and then,
-
1:51
I will scroll down to Enter/Leave & List Transitions.
-
1:59
Then scroll down, and have a look at this diagram.
-
2:03
Vue provides six CSS classes that you can use to write CSS for transition effects.
-
2:08
Vue will then do all the heavy lifting of determining when to add and
-
2:12
remove these classes.
-
2:15
So, if we think about our flipping card, when the user clicks on it,
-
2:21
the front of the card leaves, and the back of the card enters.
-
2:25
Or, on each click,
-
2:26
one side of the card is disappearing as the other side of the card is appearing.
-
2:31
Right now, that's happening instantaneously.
-
2:34
The transition effects we write will control how each card side looks
-
2:38
as it's disappearing or reappearing.
-
2:40
And that's when the enter and leave classes are applied.
-
2:43
We don't need to worry about enter-to and leave-to for our animation, but
-
2:48
these are classes that are applied one frame after an element leaves or enters.
-
2:52
And finally,
-
2:53
the enter active and leave active classes help us control the transition as a whole.
-
2:59
All the options for how long the transition should take,
-
3:02
whether you want to ease the transition, and so on.
-
3:05
Let's go to styles.css.
-
3:07
And you may need to scroll down a bit to get to the classes that control
-
3:10
the transition animation.
-
3:12
Notice that all of the classes start with the word flip.
-
3:18
I could refer to these classes simply as v-enter active or
-
3:22
v-leave active and so on, as we saw on the docs.
-
3:26
But remember when we gave the transition component the name flip?
-
3:32
Because we've given this transition component a name,
-
3:35
Vue automatically knows that classes called flip-enter or flip-leave,
-
3:40
etc., are all classes that I'm going to use with a component named flip.
-
3:45
So if we were to use the transition component again, for
-
3:49
another animation in this template, I could assign it a different name.
-
3:53
And that would help Vue and me differentiate between the two in my code.
-
3:58
The enter active property is how I can control the whole entering transition.
-
4:02
So basically, I'm saying here, when the front or
-
4:05
back of the card enters, I want the effect to last for 0.4 seconds.
-
4:12
Flip enters how I specify it, how I want the element to change.
-
4:15
I want a card side to rotate 180 degrees as it enters.
-
4:20
The opacity of 0 helps the transition look a little smoother, and
-
4:24
prevents you from seeing the card's text backwards as it transitions in.
-
4:29
You can remove that line and have a look, if you're curious.
-
4:32
Finally, when the front or
-
4:34
back of the cart leaves, I want it to just disappear, be removed from the dong.
-
4:39
So I'm setting it to display none.
-
4:41
So that's our CSS, but this won't work quite yet.
-
4:48
Because we're using the transition component on more than one item,
-
4:52
we're using it for two paragraphs, Vue needs a way to tell these two items apart.
-
4:58
To do that,
-
4:59
we need to give a key to the elements we're applying transition effects to.
-
5:04
So, for this first paragraph, I'll add a key attribute named "front".
-
5:15
And for the second paragraph, I'll add a key called "back".
-
5:22
Let's check this out in the browser.
-
5:27
So, I'm no animator, but I think we've got a fairly good-looking flip animation,
-
5:32
each time a card is clicked.
-
5:35
If we open the Elements tab really quick,
-
5:43
we can see that Vue is applying these classes at the right time,
-
5:47
without us having to write any additional JavaScript.
You need to sign up for Treehouse in order to download course files.
Sign up