Check out a free preview of the full Introduction to Vue.js course:
The "JavaScript Hooks" 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 associate JavaScript powered animations to the transition wrapper component.

Get Unlimited Access Now

Transcript from the "JavaScript Hooks" Lesson

[00:00:00]
>> Sarah Drasner: Let's say you're like me and you like working with JavaScript. I was just mentioning to someone earlier I love JavaScript for animation. JavaScript is really really powerful for animation. So what if we wanna use one of these transition hooks but we wanna use it with JavaScript instead of CSS.

[00:00:18] We're allowed to because we can use JavaScript ticks. So here are all the hooks available to us, we don't have to use all of these. It's just like the life cycle hooks, we don't have to plug in any of them. We can plug into ones that we want or not.

[00:00:32] So these transition hooks are beforeEnter, enter, afterEnter, enterCancelled before leave leave after leave leave cancelled. It's important to rate the binding CSS false. So that's you're letting view know, okay, we're not gonna be using CSS for this. If you see anything CSS around that has to do with these namings, ignore them we're using JavaScript right now.

[00:00:59] So that's to avoid any kind of like race conditions or collisions. Basically make sure that you're not naming things the same thing anyway. But it's possible you're on a giant code base and you don't know that there's a collision happening. So these are the hooks, of course we've got that vion or at, and you can name these whatever you want.

[00:01:20] I just was naming them things that made sense to me. So the most basic example here, we've got that transition component, we've got an enter, and we've got a leave. Those are gonna be the hooks that we're going to use in order to create our animation. And we're gonna say CSS false, and we put the element there.

[00:01:38] So that's the most basic example. So we can plug into and inside our methods because they're basically now methods that we're going to use. We're gonna say enter el, we have access to that element. So that is always gonna come through, and then we've got done, as well.

[00:01:56] So we've got a let it know when it's done. Part of the reason we have to do this is so that those transition modes can work, right. We've got those transition modes that are firing after the other thing is done. We need to let it know that the other thing is done.

[00:02:08] So we have leaveEl and we've got el and done and we're passing those in. So any time we need to use like most animation libraries need are referenced to work off of, that where you're gonna use that el in order to create that reference.
>> Sarah Drasner: So now you actually know fully how this was done.

[00:02:30] First, you knew how the input part was done, now you know how all of this was done. I'm writing in here, it's like hi, we already had lunch, so no more tacos.
>> Sarah Drasner: And I'm gonna write it, and you probably have guessed that I didn't have it into the dom until I pressed the button.

[00:02:56] And then we can use that hook to have it cascade in and bounce into the location. The other thing I'm doing is I'm using a library called GreenSock, which let's me save from. It's gonna take it from a bunch values and then bring it to wherever it needs to be.

[00:03:14] So I don't need to specifically say go over here, and go over here, and go over here, that wouldn't make a lot of sense. I'm saying go from all of these different locations and come to this area. So this a lot of code, don't worry we're gonna zoom in to some of it and then we're gonna look at it a little bit more closely.

[00:03:34] In this before enter, remember we had a before enter hook, there might be some values that you need to apply to your animation. And in this case, for those letters, I wanted them to do lots of weird things. I wanted them to transform in space, preserve 3D, and bounce around in this like, I didn't want them just bouncing.

[00:03:56] I wanted them bouncing and spinning and doing all sorts of crazy things. So the things that I had to do was using this thing in green called TweenMax.set, which basically applies a bunch of characteristics to the animation right before it gets going. I could also do this in CSS, I wouldn't necessarily need to use it before, enter hook, if I didn't want to.

[00:04:18] But sometimes I do it this way because these properties don't actually do anything until I start animating. So it's possible that if I'm sharing the code base with someone else and they come along and they're like, what's all this stuff. And then they delete these these properties, and they're like still looks the same, we're good.

[00:04:37] That's totally possible or me, later like a year later is like what is that, I don't know and removes it and then I'm like, the ammunition break that's weird, why did that happen? So sometimes, keeping them together makes a lot of sense because you're actually saying like, these are the things I need just for this.

[00:04:56] The other thing that's really nice about it is if I need to adjust it, I'm not going back and forth from the CSS to the JavaScript and back again. I'm just staying directly with the JavaScript code and I'm making my small changes here. I think I started off with like 600 perspective, and I was able to slowly adjust until I got what I wanted.

[00:05:16] So then, in the enter, and then el, I'm passing in that el., and I'm doing a for loop, and I'm splitting the words apart. And I'm able to say on the z: access do some Math.random and use this bouncing ease. And I'm plotting this along a timeline that I have created that has labels.

[00:05:39] But we're not gonna delve too far into this library, that's like very library specific code there. So I'm able to create a timeline and do a lot of calculations on there that I need for my animation. And we're hanging everything off of that enter. So everything kinda plugs into that enter.

[00:06:00] So we mentioned this before, we kinda went over that before. The other thing that's worth mentioning is I had done a bunch. Here are some of the variables that I was creating to use my animation. But the most important variable of all is I'm creating a timeline, and I'm passing in this onComplete done.

[00:06:21] So I've mentioned before that we need to pass in the el, and we need to pass in done. We need to let the animation know when it's done executing to call done. But some animation libraries need you to pass that into a timeline, I think, anime has something like this.

[00:06:37] GreenSock has something like this, mo.js has something like this. So in some instances, just writing done in there is not gonna work because it doesn't execute the code that way. It's going to grab everything that's on that time line, and we need to pass it in the way that's kinda native to that library.

[00:06:54] So if you're working with an external JavaScript library, a lot of the more sophisticated ones will offer you some sort of hook for when it's completed snd that's where you should put the done.