As we are going back and forth between pages, View Router lets us easily add some transitions to make navigation a little bit smoother. This is something that would be more difficult with traditional web pages that do full reloads between routes. But because we're working with a single page application or SPA, it becomes a lot simpler to do. Vue provides us with a transition wrapper component, allowing us to add entering and leaving transitions for any element or component.
When an element is wrapped in a transition component, Vue will automatically check to see if the target element has CSS transitions or animations applied. And if it does, the CSS transition classes will be added and removed at the appropriate timings. view and add a transition tag. We don't need to import this component.
It's a global view component, so we can use it directly in the template. If you're familiar with view two, you might remember doing route transitions like so. In view three, however, this syntax for creating transitions is not possible. So it's tweaked just a bit.
This is what it looks like for view three. Instead of wrapping the router view in the transition, we pass the transition into the router view slot. And then in the transition, we add an anonymous component that is the component available via the router view slot. It is important now that we use a key attribute on the anonymous component instead of the router view tag.
This will ensure the transition works correctly, and it will still destroy and recreate all the pages on route changes. On the transition tag itself, we can use the name slide, which determines what the name of the CSS classes applied to the element will be. Also, let's add a mode of out in, which means the current element transitions out first, and then when complete, the new element transitions in. Now let's add some CSS.
I'll just paste it in. We use the class name of slide, as that is the name we have given our transition. and we then use the classes that Vue provides us with, interactive, leave active, enter from, and leave to. There are six classes altogether, but we only need these four for the transition to work.
We use the CSS transition property to change the opacity and transform it with a time of one second. We then make the opacity zero and we use the translate property. Feel free to play around with these values to better understand what they are doing, and don't worry if it doesn't make sense a hundred percent. I usually end up having to play around with these a bit, or snagging them from some other place on the internet.
For the transition component to apply the proper classes to each page, all the pages need to have a single root element. So let's go ahead and wrap the destination show page in a single root element. Let's see how it looks. Pretty awesome, huh?
The pages are sliding in and out, although I think the slide is a little too much, so let's try something different. Let's change the name of our transition from slide to move up. And we can remove the mode. Now let's add our move up classes.
Here, we can call an animation of fade in that runs for one second with an ease in effect. We then use keyframes to change the opacity. And on leave, we use the transform property to move the components up. Let's see what it looks like.
There are so many cool things we can do with route transitions, but for now we are just going to use a simple fade. Let's change the name of our transition from move up to fade and add the out in mode back in. Now let's add our fade classes. This is pretty simple.
It just uses the transition property and changes the opacity and the time of point three seconds. Let's see what it looks like now. Looks better, right? If you're not convinced, you can go back and use the slide or move up transition or just create your own cool transitions.