This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Introducing Animations" Lesson
[00:00:00]
>> Sarah Drasner: So it's one thing to show things flying around the screen and stuff, and it's another one to teach you how to actually make those things. So let's dive into animations, and do some pretty fun stuff, I think. The first thing that I need to cover before we talk about animations and transitions.
[00:00:19] And the transition component is the difference between transitions and animations, because they are different. And I think actually people usually get these a little bit confused. And then it starts to get really confusing for people because things don't work the way that they think that they should. Transitions and animations are actually two separate things, with two separate ways of implementing them.
[00:00:40] Transitions are taking one thing that's one particular state and another thing that's same thing in another state and interpolating those values. Just from one thing to another so and a great example is a positive zero to a positive one, and just going from one thing to another. In a missions on the other hand can have multiple steps, so animations could do one thing to another thing.
[00:01:10] Just like RXJS is not all the same kind of thing. An animation can do the things that transitions do but transitions cannot do all of the things that an animation can do. Animations are slightly more powerful, and they have a slightly more complicated syntax because of that power.
[00:01:28] And right now we're talking sort of about CSS animations but this is true of JavaScript animations too. So animations can also have steps in between so you can say something like I want this to happen at 30%, and I want this to happen at 68% of the time.
[00:01:45] And I want this to open at 75% of the time. So when you're working with animations you typically name them so that you can access them. And they're also reusable for that reason. Transitions, you're really literally saying you thing at this point go to you thing in that point and I want you to do this kind of stuff in between.
[00:02:05] Cool, are we all clear on that piece of it it before we keep going? All right, so we're gonna start off with, again we're starting off with the kind of simplest and least useful maybe, and then we'll build up to super powered and more complex. I think a modal example is pretty common for the web.
[00:02:29] So what were gonna start off with that simple transition. So if we have something like a modal that pops up and says here I am, and there's some sort of slot with you know more information inside of it. And in that modal were clicking and it's gonna show, hide and show that child.
[00:02:49] And we have this, just toggling that whether it's showing or not showing, it's basically just toggling that back and forth. So we have this modal, Show Child, Here I Am, Close, Here I am, Close. Okay, that's great. It's not actually like that interesting. And the other thing is, I think humans haven't really been designed to understand fits and starts of computer interactions.
[00:03:17] We don't see booleans in real life, like you don't just pop into the class. You come from outside and you enter and you walk into the room. So for humans having things pop in our face like that it is really quite jarring and not a good experience. If you think about the last time you're on mobile and you're trying to read an article and some model just popped in your face, you were probably like.
[00:03:44] We can improve that experience, really stop putting giant models in mobile experiences. We can improve that experience slightly if we can let the user know what is transitioning between those two events. So basically the equivalent of someone walking into a room instead of just bursting into appearance. So the first thing we're gonna do is we're gonna take that child that we created and we're gonna wrap it in this transition component.
[00:04:16] And in that transition component it's kind of like a reserved word. That transition component is particular to Vue, it's built into Vue, I didn't make that. So that transition component will allow us to plug in to a lot of functionality and I'll show you some diagrams of this in a minute.
[00:04:33] But the other thing that's important is that I have something that is being mounted and unmounted, and that's what the transition component is really good at. The transition component is going to assume that you are bringing something into existence and then making it go away. So there are animations that we're gonna do and we're gonna use that don't necessarily fit that transition component, not everything needs to work with that transition component.
[00:04:57] Like you saw earlier when we plugged into that mounted we didn't use a transition component for that because it doesn't really necessarily make sense to. So not every use case is gonna fit in this but a lot are, there's a lot of things that are. So the things you need here, again that transition component and that V-IF.
[00:05:17] So here is basically what we're looking at when we are looking at that transition component. We are gonna plug all of the things that we want it to do when we're interpolating those values into this interactive and leave active. So when we're saying vf, there's a time where it's transitioning and then there's a time where it's transitioning out.
[00:05:37] So that's the way that we want it to work. So in other words our eases are gonna go in there. The number of seconds that we want that transition to occur is gonna go in there. But what we have at the beginning and the end of that is the state of the start and the state of the end of that.
[00:05:58] So at v-enter, it's gonna be opacity 0. We're not gonna apply any eases to that, that's just a static value, that's just gonna be opacity 0. V-enter-active is where we put the animation logic, and then v-enter-to, is opacity 1, and then same thing for leave basically. So you got the start, the middle, and the end.
[00:06:20] So an example of this, the like probably the simplest example of this that I could possibly muster is v interactive has a transition of color and one second. So I'm letting it know that I wanna transition to color property. I'm saying one second, and the browser's gonna by default use ease as the easing value.
[00:06:41] So it's also reusable for other components. We can say, fade-enter-active, fade-leave-active, fade-enter, and fade-leave too. So I could not necessarily attach it to that component, if I don't want to. I can actually just say anytime I call some transition feed, I wanna it to behave this way. So, if I wrap anything in a transition component and I name it feed it's gonna plug in to these values, enter active, Leave active, feed enter, and fade-leave-to.
[00:07:16] And there's a reason why I didn't say opacity one here. We have the opacity zero, but we don't have the opacity one, and I did say that you need both. Why didn't I do that, does anybody know?
>> Speaker 2: Because it's already set to opacity.
>> Sarah Drasner: What's that?
>> Speaker 2: It's like that component's already at one, so you don't have to worry about it.
[00:07:37]
>> Sarah Drasner: That's right. Anything that's the default state of that component, you don't have to say again. So you can eliminate some code and you can eliminate some. And sometimes being opinionated that way is not very useful. Because what if that component was actually at opacity 0.8, and then you've just made it opacity 1, it's gonna flip like right away into opacity 1 and go there.
[00:07:58] So you actually, in some ways you wanna remain a little bit flexible in case somebody else had put some sort of different color opacity on it. So in this case we're using ease-out for this, but if we're gonna be a little bit more refined. We're just reusing ease-out for any time that we're using that transition.
[00:08:20] So we're basically saying enter active, and leave active. Anytime it's transitioning we're using the same easing value. But if you're gonna be more refined about your eases, ease-outs are good for entrances, and ease-ins are good for exits. I know that kinda sounds funky, I didn't make up the names, that's not my fault, I can promise.
[00:08:41] [LAUGH] But that's a good rule of thumb to get into your mind. Not in every circumstance but in a lot of circumstances, those are the types of ease-ins values that you're gonna need for it to look right. So, again, this is unnecessary as it's the default, fade-enter-to, .fade-leave is opacity one.
[00:08:59] So now that we've wrapped it in that transition component, we have something that's transitioning on and closing. That's okay, but it could be even a little bit better because what if we wanna make that background,. Right now the background is still like let's say there's a ton of text back there and we're still just seeing all of that text.
[00:09:22] So what if we wanna make that background content fade out of view, so that the modal kinda takes center stage and the background lost focus. And that's also kind of a normal thing, sometimes people put a sheen over the whole thing, that's a pretty typical one. In this case we're just gonna use a CSS filter and we're gonna blur it.
[00:09:41] But we can't use the transition component for this, right. Because I just mentioned, we're wrapping that component and it's for when it's VIF mounting and unmounting. So that whole background, that doesn't apply to the background, but we have class and style bindings. So this is pretty cool, we can apply a class to whether or not it saying blur class, for whether it's showing or not.
[00:10:06] And we can apply transition logic to that as well, we don't have to necessarily use the transition component. So in this case I'm gonna say the BK is like transition all, one second ease out. And that blur class that we're gonna plug into in the data is gonna be everything gets blurred two pixels, and the opacity reduces just a little bit.
[00:10:31] And BK class is gonna be BK. And blur class is going to be blur. So we're applying two different classes to it as it goes. So then we've got something like that. And this is not like super fancy or anything, I'm kind of keeping things a little bit more simple.
[00:10:51] But you can now see how you'd would use a transition component and maybe also affect other things with the same toggle. Like, we're actually using In this one we're still using is showing false to generate that logic. It's all plugged in to that same state of whether or not is showing as false.
[00:11:11] And that's kind of good because then if something moves you're keeping everything attached to that one toggle, not having it here and then there at the same time.