Vue 3 Animations Tutorial #9 - Transition JavaScript Hooks

Key Takeaways

all right then my friends so far we've just been using css classes to control our animations but the transition component also exposes a number of javascript hooks that we can use as well so that we can fire javascript code at different stages of the animation so the different hooks that we get are split up into two groups we have the enter hooks which is when the item is entering the page and they are before enter enter and after enter and we also have the leave hooks which is when something is leaving the page and they are before leave leave and after leave now i think the names make it pretty obvious when they fire but i just want to show you a little timeline of events here so we have the enter transition where something fades in and then we have the leave transition where something fades out of the page so the before enter hook would fire here before the transition even starts now the enter hook is gonna fire as the item starts to transition into the page after enter is gonna fire after it's just finished transitioning into the page so then it's on the page right but at some point if it leaves just before it leaves it's gonna fire this before leave hook then as it starts to leave it fires the leaf hook and then after it's fully left it fires after leave so there are different hooks that we can use and that we can tap into in our javascript code now the way that we use these hooks is just by attaching them to the transition component much like we would things like click events so we say whatever hook we want to use and we set it equal to some kind of function there's a typo there there should be an extra e but you get the point so we generally call these functions the same as the hook but camel case but you can call them what you want this is just kind of like a convention so let's give this a whirl now in our code all right then so to demonstrate these hooks i want to transition this dude h1 in and out of the page so first step is to surround it with the transition components and we need to close that off at the bottom as well down here and scoot this in i'm going to give this transition a name and set that equal to fade and also i'll apply the appear prop so that when we first see on the page it fades in okay so now down here let me paste in a few transition styles i'm not writing these out from scratch because we've seen all of this kind of stuff in the past and i want to move on to the hooks so we have our enter from class right here to say start at an opacity of zero we don't have an enter two class because the default opacity of an element is one so it knows to transition from zero to one but we have an active class to say take three seconds and ease then we have fade leaf two again we don't have fade leaf from for the same reason the default value of the opacity is one so it knows to start at that point when it leaves and end up at zero then the fade leave active says transition the opacity three seconds and ease so if we save this we should see the title fade in awesome so this all works now and now i want to move on to the javascript hooks so we're going to start with the enter hooks and to do this i'm going to just edit this so it appears a little nice on the page so i'm just placing the hooks one after another so it doesn't go off the screen to the right okay so the first one is going to be before hyphen enter so remember this fires just before it starts to enter the webpage the dom so we're going to set that equal to a function which i will call before enter and we'll make these functions in a second but first of all let's add the hooks so before enter then enter which fires just as it starts to enter the dom and we'll create a function called enter for that one and then the other enter hook is after enter and this is gonna fire oops we need our at symbol at the start this is gonna fire just after it's entered the dom so we'll create a function called after enter for that one all right then so we need to create these functions so that they fire at these different points during the transition so down here in the setup i'm gonna create them i'm gonna say const before enter is equal to a function and then i'm going to do another one so let me copy this and paste it down here another two times this one is just going to be enter and then we have after enter as well now we need to return these at the bottom so we can use them up here in the template so return and it's going to be before enter enter and after enter all right then so we have access to those three functions now we need to do something inside these functions for now let me just log a message in each one so we can see that in the console so before enter and let me copy this and paste it down here and here we'll change this to enter and then this one to after enter cool so if i save this now hopefully we should see these messages logged to the console at different points so let me do that and come over here and open up the console and i'm going to clear out everything so far and refresh so we can see before enter and enter straight away and then once it's finished fading in we see after enter as well so hopefully now you can see how all of these different functions these different hooks are firing at different points during this transition now i also want to be able to test the leave hooks as well and in order to do that we need to find a way to then fade this back out to have it removed from the dom so in order to do that we're going to control whether this shows using a v if so let me apply that right here v if and i'm going to set it equal to a property called show title which we now need to make down here in setup now this is going to be a ref so const show title is equal to ref i'm going to enter on this to auto import it right here and then the initial value of this is going to be true so it shows to begin with we also need to return it down here i'll do it at the start show title like so so for as long as this is true it's going to show right so now we need to make it false at some points and i'm going to do that down here inside the after enter so what i'll do is say set timeout and then fire a function and this is going to take show title and set it equal to false like so and i want to do that after maybe two seconds of it being on the page so it's going to fade in then once it's done and it's faded in it's going to find this function which is going to set the timeout and it's going to set show title to false after two seconds and once it does that it's going to start to fade out because when it's false it removes it from the dom and it's going to do these exit transitions so let me save this and preview over here so it fades in then this function fires after enter and after two seconds it starts to fade out again okay so now we have to exit transition or the leave transition we can attach the leave hooks so let's go back up here and the leaf hooks are before hyphen leave which fires just before it leaves and we'll fire a function called before leave for this one the next one is going to be at leave and this fires just as it starts to leave so we'll create a function called leave for that one and then finally we have after leave which fires after it's left to dom and we'll use a function called after leave for that one all right so now we need to make these functions down in setup so i'm just going to copy this first of all and paste it down here and i'm going to change this to before leave and i'm going to change this to leave as well and then i'm going to copy this and paste it two more times so the second one is going to be called leave and we'll just log out leave for that one and then we have after leave down here and then after leave is logged to the console so now hopefully we're going to see all of these functions fire at some point during the in transition and the out transition first of all though we need to return these functions so they can be used in the template so before leave then we have leave and we also have after leave or not after enter again after leave okay so if i save this now i'm gonna refresh over here we see enter we see these two hooks fire then this one then we wait two seconds it starts to leave and then we have after leave at the end so hopefully you can see when all of these hooks are firing now now one more thing i want to show you and that is that we get access to an element argument right here and this represents the dom element that's actually leaving in our case it's going to be the h1 so i could log this to the console and i'm going to do that in each case so let me take an l in each of these i'll just alt click so i can do them all at once like so and then also i'm going to log it to the console in each case so let me alt click all of these as well so comma and then l and now we should see that dom elements in each case when we get a console log right here okay so in each case we can see the different classes apply to it and these are the transition classes that we made down here okay so what else can we do with this element well we could change the style of the element so for example after it's entered i could maybe change the text color to green so i could say l dot style dot color and change that equal to green and i could do something similar just before it leaves i could change it to pink so l dot style color is equal to pink like so so if i save this now i'm going to refresh first it fades in once it's in it's going to change to green then when it starts to go out it changes to pink so this is how these hooks work they just fire at different points during the animation and we can access the elements during the animation as well and do things with it now another advantage of these hooks is that we can actually control the animation via the hooks in javascript rather than in our css and that makes it easier to do more complex animations and transitions and we'll see how to do that by using a library called gsap next