Create a beautiful Vue Router Transition


Transitions are a fantastic way to give your
webpage the final touch. And today, it’s all about how you can implement
a beautiful page transition in combination with the Vue Router library so that your visitors
are no longer bored. Let’s start right now. What’s going on, my name is Mario, welcome
to another video. If this is your first time here and you wanna
learn more about Vue JS or other related stuff, start now by subscribing and clicking the
bell, so you don’t miss anything. Alright, I have just created a new Vue.js
project you can see. The Vue Router library is also onboard. So we have here a little navigation, where
we can switch between these two sites here, home and about. Looks not really fancy at the moment, but
to give it a better look and feel, you can implement a beautiful transition. I have here the App Component, and you can
see here the router-view tag, which renders the current view, depending on which page
we are. And the only thing you have to do is to use
the transition component. It’s a built-in Component provided by Vue.js. And you can choose a name for your transition. It’s totally up to you. I write here, merely fade. And you can use several modes for your transition,
and in this case, makes the out-in mode sense. So that first, the current page goes away,
and after that, the new page fades in. Last but not least, we should close the transition
tag after the router-view. OK, we are done here in the template, let’s
go to the stylings. Yes, we make a CSS transition. And there are several predefined CSS classes
you can use for this. Each class is for a specific part of your
transition, where you can set your CSS definitions. The first we need is the enter class, but
to match this class to our transition tag in the template, we have to set a prefix,
in this case, the name from our transition, fade. And this class is the starting point, but
we have to think differently in this case. We use here the mode out-in, so we have to
define here the state where the content is not visible. I do this with opacity and set it to zero. And I want to have a different position so
that the content slides in from the right side. We can implement this with transform and translateX
for the horizontal axis and as value, maybe, 2em. By the way, if you want it from the left side
so you can write here minus 2em. OK, this should also be the same for the leave-to
class, so let’s add this right here. And this class is for the endpoint from our
transition. Not from the enter transition here, that would
make no sense. It’s for the leave transition, where the page
goes away. OK, next we need two more classes, the first
one is the enter-active class. And the second one is the leave-active class. Both are for the parts between the starting
and endpoints from your transition. And I’m going to animate these parts with
the transition attribute, applied to all, with maybe 300 milliseconds and with the ease
animation. Let’s take a look. I save. And now, we have a fantastic page transition. But here is a scrollbar, you can fix this
quickly by using overflow hidden. I write this here straight into the id app. And set the width finally to 100vw. I save, and yes, it looks nice and clean right
now. Looks beautiful. And you see with only a few lines of code. That’s one thing I love about Vue.js. Thank you so much for watching. I’ll see you next time!

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *