Flip Transition!

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