Vue Router Animations Tutorial - Creating Transitions Between Pages

Key Takeaways

hey everyone Gary Simon of course Seto and lately I've been focusing a lot on view Jas in today is no exception we're gonna take a look at what are called page transition animations and all of the major JavaScript front-end frameworks have these in this ability to kind of create these nice animations as you like as the user clicks between different routes I on the app and so let me just show you real quickly what we're gonna do today and I here it is obviously very simple and so we can notice notice that the URL here we're at the base URL that the home page and then if I click about the URL changes is to completely to about but we cannot notice that the the transition is seamless between these pages and you could do a lot of different types of animations and I will show you just a few different things you can do and really the possibilities are endless all right so just sigh to get this out of the way make sure you subscribe here if you haven't yet and check out corset row calm alright so let's go ahead and get started I'm going to hop into my console real quickly oh but real quick before we begin make sure you check out my site course cetera comm where you're gonna find a bunch of courses on modern design and development a lot are free and others you can access for the cost of buying me like a six pack each month that's it now also it probably wouldn't hurt to subscribe here on youtube and be sure to make sure the notifications are turned on alright let's get back to it alright so the very first command that we're gonna run here is a view command so make sure that you have the view CLI installed if you don't know whether or not you have that just view - V notice I have 3.0 and that gives us access to the view create command if you have an earlier version you'd have to use view in it still the same thing everything's gonna work in the previous versions but if you want to follow along just go ahead and upgrade to the 3.0 version alright so view create and I'm just going to call this view router - anims like for animations alright so when we do this it's going to prompt us please pick a preset so we're gonna choose manually select features the only one not going to choose with the keyboard down arrow key in the space is the view router that's the only thing I really care about if you want pre-processing and all this other stuff you can go ahead and do that hit enter and we're just gonna choose I if you want to in dedicated config files it's fine it's not really a big deal for this project and then I don't want to save this as a preset and now it's going to install so and once it as this installs just real quickly I I'm using Visual Studio code as my code editor it's from Microsoft it's free and once this is done I'm going to run a command called code and then a period and that will launch it for us alright there we go so let's go ahead and CD into it and then I'm going to run code period here and then also yarn serve so you're going to need yarn by the way that command up there wouldn't have worked if you don't have your own installed so you make sure they have that installed it's 3.0 uses that and now let's go back to our code editor alright cool okay so right off the bat we need to do a little bit of cleanup work here so the very first thing gonna go to source components here in hello world and I'm gonna gut everything that's inside of the div class hello and make this bigger with my ctrl + key here alright so again that's all we're gonna do here just for now and I'm going to save that then we're going to go to our views folder and this is all stuff that the CLI generates of course we're going to go to the about view and I'm just going to add in a lorem ipsum so lorem or yeah there we go i yeah won't want to encase that in paragraph so real quickly I should have done that first I just installed that lorem little plug-in go ahead and google that if you want to as well again I'm just going to copy this so this is an about page one thing we want to do as well is add an additional class called page and you'll see how that works in in terms of importance we're going to create a CSS rule set for that specifically down the road and then we're gonna go to home and basically the same thing we have going on so we're just gonna put a page here for the class and get rid of both of these and let me just make my life a little bit easier just copy both of those paste this in alright and so I'm just gonna put for this one alright well I this is lovely okay that's what I used before and then save it alright so now we're gonna go back here to our source app view which is where we're pretty much gonna spend the rest of our time for the most part alright so I want to focus on just styling this a little bit better if I get out let's see here this is what everything looks like currently so let's fix this up all right so all right delete all that within a style and then we're going to import I in animation library a third-party animation library you don't have to use this but I'm going to show you how to use it in case you don't want to have to write your own CSS animations for your page transitions alright so next I let's see we're just going to reference just a few generic roll sets to get everything looking decent so let me just paste this in just a couple things here we have the body we're giving it a gray background color here font family we're getting away from that ugly serif font that's default and then the body I have a height and we're gonna have some padding on here as well that's why I put the calc there to get rid of to accommodate for that and then also our main div app ID which is right here this is in reference to this line I'm just going this is what really gives it the container the white container that we have with is 50% padding border radius margin nothing very specific to you know what what this tour tour is about I just want to make it look good and then also what's really important is specifically for this the page transition animations to work well I found that addy and this is where you know I'm referencing that page class that we added I I added position fixed and with inherit I'm gonna show you the effects of when we remove this once we apply the animations but go ahead and just save this as is for now okay so now we're going to get down to actually defining the router animation so what we want to do notice we have a router view right here this is essentially where our views are placed and of course we have two of them which is home and about and we want to wrap it with a transition element so transition and this is specific of course to view name now we can give this a specific name that we can then reference later on so it could be anything router annum for animation and then if we want to use this third-party animation I've library we can go ahead and add the following so enter active class animated and we'll say fade in down ok so where did I get that information from let me come up here real quick so animate CSS right here all right so this is animated CSS that's what we're importing and if you want to see what it looks like to flash or whatever these are the names of the actual classes that we can add so like if we want like a fade in entrances we can like fade in and down so if you want something like that that's where we we first have to add animated and that's specific to that that's animation library and then the name of the actual animation there so we can also add it we also have to add another one leave active class and this defines the animation for when the element that's wrapped inside of this transition element here leaves the Dom so like when you click from a different page what happens to the content that's leaving alright so same thing animated and then we say fade out down let me see if that's actually what I used before yep alright and then we're done with that and now let's close that up and then save so let's go ahead and see what this actually looks like in the browser all right so I'm refreshing I want to make sure any the CSS changes actually take place there we go notice it's going back from about now let me show you what happens to this when we don't have that page class defined so I'm just gonna get rid of that go back and refresh it's really jerky so adding position fixed or even absolute will help fix that issue all right so let's go ahead and bring that back okay so what if we're just real quickly what's experiment just to show you how easy it is to use something like animate that CSS I mean you can experiment with a lot of different things let's just do something ridiculous like I flip in X&Y I'm not sure if that's gonna look good but we'll try it anyhow just for the hell of it so and then flip in wait probably use flip out but nonetheless yeah that's kind of ridiculous you can also put a delay so that the 1 finishes first before the other one comes in alright so let's go ahead real quickly and talk about next what if you wanted to define your own animation or you doesn't want to use this big bulky I'm animation CSS file alright it's very simple we can get rid of our interactive class and leave active class alright so now it's going to simply rely on any CSS rule sets that we create with the name as a prefix for the names of those classes alright so let me go ahead real quick and come down here alright so the name again is router annum so we're gonna use that as to be getting big beginning of a CSS class rule set so paste that and then we're going to say - enter - active all right so now we can use either the CSS transition property to define an animation or an actual keyframe animation so if we go to animation we'll say the name of the am animation is going to be coming and then for one second is the duration we'll also say they'll have an animation delay of 0.5 seconds and we'll send it to a pasady 0 and of course I didn't just know read a legates to specify these values I did it through experimenting I and so it's all about experimenting really so it's also put router Anam leave active and these different states here by the way there are other states that you can use that give you a lot of fine control so I would suggest researching those and that's a specific to view j/s animation and so what's put in animation one name this one going and for one second so now let's define the actual keyframes alright so we'll put in at keyframes going and we'll just say from and transform we'll say translate X 0 so this is going so this is based on the current route that's you know the current page that's in view so we're just gonna add we're just going to start from where it's at which is 0 then 2 will say translate X and we'll just say negative 50 pixels you could put percentages or whatever you want here if you want and then opacity 0 because we want to leave or fade out all right so next let's just copy this we're gonna do one for the coming animation so this is the wine that's coming in so let's start it off at negative 50 pixels and the opacity will be 0 and then 2 will be 0 pixels and then 2 pasady 1 very simple simple stuff here all right so let's go ahead and save that and with any luck it will work as we want it to so we'll click on about there we go now the animation there I added a delay to this because otherwise I'll just look at this a few more times you can see there's no there's not much overlap now if I remove that delay save it it kind of is a little bit confusing so that's why I added that delay now of course you can die I'm gonna have that back you could you could add multi-step animations with percentages like 0% 25% you know - from I - really add even more complex animations but at the same time you do not want to overdo that because it's going to kill the user experience and nobody wants to watch a ton of animation when they're trying to access different pages but for something subtle I think it's definitely an approach that you could take to really enhance the user experience of the website alright guys I hopefully you enjoyed that I and if you did make sure you subscribe here I'm gonna be using actually the same technique on an upcoming course Etro pro course where we use view Jay asked to create a sort of like a personal site slash portfolio alright talk to you guys later