Check out a free preview of the full Introduction to Vue.js course:
The "CSS Animation" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

Sarah reviews how to use the transition component for custom and more involved CSS animations.

Get Unlimited Access Now

Transcript from the "CSS Animation" Lesson

[00:00:00]
>> Sarah Drasner: All right, let's talk about CSS animation briefly. I know that we kind of said that transition and CSS animation are two different things, but we use the transition component for both. There's only one component in View that's built in. We are still gonna use the transition component, but we are gonna use it a little bit differently.

[00:00:21] So, what we'll end up doing when we use CSS animation within the transition component is we're gonna give it a class. We're going to say, okay, when you're interactive during that intermediary state, you're gonna need to plug into this CSS animation class. And then it's going to go use that class.

[00:00:40] This is actually pretty great because that means that we can plug into CS Animation libraries if we want. We don't have to write all these animations from scratch, we can reuse animations if we want to. So if I say the enter-active-class="toasty", I could say toasty 1s ease both.

[00:00:59] And then that is available to us. We could still be in that transition component, we gave it a name and we were using the transition component for that transition in that enter-active-class. We could do it that way as well, but I think that this makes a little bit more sense because then you can reuse that CSS animation in multiple places.

[00:01:21] Transitions, you're really usually just transitioning from that first state to another. In CSS animations, maybe you're doing something like a bounce, or you're doing something more involved, so it's more possible that you're going to be reusing that again and again. So if you need to reuse it and be a little bit more specific, you could say toasty for the enter-active and for the leave-active, we're gonna say bounceOut.

[00:01:49] So you can hook into CSS animation libraries. So if we want to bounce a ball here, we'd have a button. And that's gonna just toggle the same way that we were toggling that model. So we've got a transition component and we've got that v-if that it's wrapping, that's important.

[00:02:07] So we've got the transition, we've got the name as ballmove, the active-class is bouncein and the leave-class is rollout, because we're doing something more involved. So this looks like a lot of stuff, I know, I know, but actually, we're keeping this kind of dry. Rather than writing translate 3D and then the number and then the y axis and then the zero over and over and over again, we're writing a mix in that we're including, so we're writing less code over all.

[00:02:39] The other thing to note is, in this 20%, 40%, 60%, all of these, they're the same value. So I'm not writing, 20%, 40%. So basically in this key frames bouncein, if you're not familiar with CSS, I'm just stating what I wanted to do at different percentages of time.

[00:02:59] So, if I'm gonna use a bounce, then I'm going to want it to come up and then down, and then up and down and up and down and get lower and lower every single time. I'm writing transform: translate3d because I'm trying to hardware accelerate it. Hardware acceleration in the DOM doesn't happen just right out of the gate.

[00:03:21] We have a few different tricks up our sleeve to tell the browser that you'd like to hardware accelerate. One of them is this thing called the null z transform hack. It's so that we say translate3d and we apply the 0 on the z axis. You can also say translate z and zero, but in this case, we're actually moving things with the transform.

[00:03:43] So we don't want to overwrite that property. We wanna keep using it. You can also say back face visibility hidden. You can also say perspective 1,000, 1,000 pixels. All of those things will let the browser know, okay, I'm going to hardware accelerate this thing, get ready and make it a little bit more performant.

[00:04:04] We're also moving with transforms. You might think, well, why don't I just use top and left and margins, that would be easier, I already know those things. It's because the browser doesn't deal with those things as well. It will cause repaints in order to create those values. If you used a margin or a top, or something like that, you'd end up seeing this jittery occurence.

[00:04:30] Transforms, on the other hand, don't cause repaints. And if that bums you out, that you're only using transforms to move things around and shift them, just know that transforms actually are powerhouses, there's tons of stuff in a transform. We've got skews, we've got rotates, we've got translate x, we've got translate y, we've got all sorts of things.

[00:04:52] And if you look at all of my animation work in they're all just using opacity and transforms. I'm not doing other things with them. There's a lot you can accomplish with that. So that's why I have more complicated code here than you'd expect, right? You might just think I would do margin top and move it around, but what you'd see is that, that animation wouldn't be quite as fluid.

[00:05:15] So, if we're using this bouncein class and we have animation, we can use, I am using a cubic bezier here instead of ease out and in because I want it to be a specific type of movement. If you want really refined animations, playing around with easing is really important because easing is basically the personality and the life of that animation.

[00:05:37] There is a thing called Cubicbezier.com that Leah made where you can preview and compare a bunch of different animation values. Okay, who'd gonna win? It's a trick question, they're both gonna get there at the same time. [LAUGH] But you can see that the way that those eases work will completely change the way that it actually manifests.

[00:06:04] That looks totally different. Those are totally different types of motion. So paying attention to eases is really important. So if we have bounced the ball, and get it gone, we have bounce in and roll out. So now it might make a little bit more sense why I plugged into two different named CSS values, one for entrance and one for exit, instead of saying, I'm just transitioning between these two whatever, given a name like Fade.

[00:06:34] In one of them, I'm very particularly using a bounce and in another one I'm very particularly using a rollout, so I would definitely need to name those separately, so that I could reuse them but also because they should be named differently. They are different type of motion