Animating Vue Router Transitions in Vue 3

view router is an official view tool that allows developers to easily create a single page application it takes the route or the page we're trying to navigate to and maps them to different view components one of my favorite features of view router is the ability to create smooth transitions and animations between your pages these view router transitions are a great way to add some polish to your web apps in this video we'll set up view router in view 3 and look at a few different ways to add page transitions let's jump right in for this tutorial we're going to be creating our view 3 project using veed and if you want to learn more about v there's a link in the description for our in-depth guide but here we're going to create our app and run npm install to get our dependencies next we want to add view router to our project like this now that view router is installed let's set it up inside our source folder we'll create a new folder called router and inside we'll make an index.js file and this is where we're actually going to set up and export our router view router gives us two methods that we need to import to get started first is create router and second is create web history create router will as you can guess create our router instance create web history creates an html5 history often single page apps like vue will use the hash history in which all urls are prefixed with a hash but this is bad for seo and i recommend using the create web history to provide clean and seo ready urls and then the final thing we import is our hello world component we're going to be changing this later on to use our custom pages but for now we can use the built-in hello world to just set up view router with everything imported we create a constant router and set it equal to create router and inside create router we'll pass it an object and this object needs two properties first will be a history mode and like we were just talking about we're using create web history and second will be an array of all of the routes that we want in our app for each route we declare an object with at least two properties one with the path to our page and one for the component we want to render our app is going to have two routes home and guide for now we're just going to set up both of their components to hello world but once again we'll switch that up in a little bit the last thing we want inside index.js is to export our router object next we actually have to configure our main.js and tell our view app to use our router so inside here let's import router from router and then we want to separate this command into multiple lines first we'll create our app and assign it to a constant called app next we're going to tell app to use our router and then finally we can mount it alright we're almost there so finally we want to go inside app.view and actually start rendering stuff we can do this by using a router view component so depending on our path view router will give us a different component and then render that component in place of this element so in our app if we take a look at the url right now we are at the base path and our router is working properly and if we navigate to slash guide we can still see our hello world component but let's say we want to go to a path that doesn't exist maybe it's an about page as you can see no component renders because our router doesn't know how to handle this path we have to declare our valid paths when we set up view router alright this is great but let's actually make our homemade guide pages now so inside our components folder we're going to create two view components the first will be called home and the second will be called guide let's open up home.view and create a base template i'm just going to create a wrapper div with a class name of page and then add some placeholder headings and paragraphs and then let's do the same thing with our guide component to get these components working inside of vrouter let's go back into router slash index.js and import both home and guide then let's make the base url or just the slash route to our home component and our slash guide path route to our guide component now if we go back to localhost 3000 our home page will render and then when we type in slash guide we'll see our guide component our basic view routing works but we're going to add a few styles and a header section to make our app look a lot cleaner inside app.view we want to create our entire component inside of a div with a class name of content and then we'll add some styles to make this class a center column next we want to create some navigation links we can do this by using view routers router link component and these components render out to just regular anchor tags and they allow us to easily create links using our defined paths so we'll create two router links one for home and one for guide for each of these we need to set the to prop and this will set the path that our router link is linking to so for our home link it's slash and then for guided slash guide exactly what we set up inside of our router file and now let's add some styles to these anchor tags so first we'll change the base state and then we're going to want to add some styles so when our link is hovered we can just say a colon hover and then pass it in a border bottom one handy thing about view router and router links is that they dynamically add styles depending on your application state here we can use one called router link active it adds a class if your router link is pointing to the current page and let's just add this class to be styled like our hover state and now in our app that blue border will be visible whenever we're on that particular page so on our homepage home is underlined and if we click on guide guide will be styled now that we have the basics of view router set up let's take a look at how to add some transitions to get a really simple example working we're just going to implement a simple fade transition between our two different routes in older versions of view and view router all we had to do was wrap our router view with a transitioning element however the new versions of view router make us do it a little bit differently so inside of app.view what we want to do is change router view from a self-closing tag and give it a v-slot attribute and inside we're going to create an object to get the component thanks to this v-slot we can now access this component inside of our router view and we're going to use this by creating a dynamic component and binding the is attribute to our component so now our view router will tell this dynamic component what to render finally to actually create our transition we can just wrap this dynamic component with a transition element and since we're making a fade transition we're going to give it a name of fade so now is a great time to understand how exactly this transition element works the transition element sets up different hooks and adds classes to your changing elements so that we can style them throughout different stage of the transition there are six different transition classes three for entering and three for leaving v enter from and v leaf rum set the start state of the transition and these classes are removed once our transition starts the end or two and v leave 2 set the end state of the transition finally v n are active and v leave active control our transition while it's active these 6 class names are the default names for a transition element meaning if we don't name our transition it will apply these classes however since we did give it a name of fade these six classes are renamed like this just replacing the v with the name so to create our fade effect we want to modify the opacity of our elements we want the elements to come in from an opacity of zero and then fade out to an opacity of zero we can do this by giving fade enter from and fade leave two an opacity of zero then when our transition is active so in our fade interactive and fade leave active classes we want to transition our opacity the reason that we never have to explicitly state when we want our opacity to be 1 is because that's the default opacity value for an element so at the beginning the fade enter from will set the opacity of our element to 0. then once the transition starts that class is removed and the opacity will transition to the default value of 1. if we look at this you can see that our element is fading out properly but the element fading in comes in early and then everything kind of jumps around basically it just looks bad and that's because by default our transitions are happening simultaneously if we inspect element we can see that when we change routes there are two page divs during our transition we can fix this by setting the mode on our transition and there are three different modes one is the default mode that we have now where the two elements are transitioning at the same time next is in out mode where the new element fades in and then when it's done the old element will fade out finally what we're going to be using is called out in mode so first the old element will fade out and then the new element will fade in we can set the mode of our transition simply by defining it on our element so let's just type mode equals out in now when we run our app it works properly and when we inspect element we'll see that only one page div is in the dom at a time awesome you've created a view router transition now let's look at how to implement some more complex transitions using animate.css animate.css is a great library that gives us different css animation classes like bounces fades rotates and a lot more to add it to our project let's head over to their website the link will be in the description and use the cdn link to import it into our project so let's copy and then paste it inside of index.html next we're going to want to add the animate.css classes whenever our transition is entering or leaving in our fade example we used view router's generated class names to style our transition however to integrate animate.css we need to use custom classes so inside our transition element we'll use the attribute interactive class and we're going to set it to the animate animated class which is needed for animate.css and then we can specify our animation and we'll use the animate fade in left transition let's do the same thing with leave active class but we'll change our animation to fade out left back in our app you can see that our animate.css styles work perfectly the final thing we're going to look at in this video is adding different transitions depending on our route right now we're using the same transition every single time but with view router there's a really simple way to add dynamic transitions so we're going to be treating our two pages kind of like a slideshow so when we go from home to guide we want it to slide to the right and when we go from guy to home we want it to slide to the left to set up these per route transitions we can set meta information on our routes inside router slash index.js let's add a meta object and give it two properties one called enter class and one called leave class for our home route we want the enter class to be fade and left and the leave class to be fade out right for our guide route we want the enter class to be fade in right in the leave class to be fade out left then back inside app.view we want to add another property into our router view's v-slot so right after component let's add route and this will give our router view access to the current route so now we want to bind our interactive class using the v bind or just a colon and then we'll bind it to our route.meta.enter class and we'll do the same thing for our leave class in our app let's refresh and toggle between the routes depending on where we're navigating it's a different transition however for the effect that i'm looking for this transition feels a little slow and doesn't really give that true slideshow vibe and that's because of this out in mode waiting until one component is completely gone until bringing the next one in so let's remove this mode attribute and see what happens the timing looks better but we're back to that problem that we had before where the components are jumping all over the place to fix this we can set the page class which if you remember is the wrapper element for both home and guide to have an absolute position so inside our app view let's give page class a position of absolute and set the top to 30 pixels now when we switch between the pages it feels super responsive and like our two components are actually sliding together i'm going to go ahead and wrap this video up here i hope this helped you get view router and transitions inside of your app if you have any questions leave them in the comments below and don't forget to like and subscribe for more view content peace

Channel: LearnVue

Views: 10,262

Keywords: vuejs, web development

Id: L77Uq93XXzk

Length: 12min 7sec (727 seconds)

Published: Mon Jan 25 2021