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