Image

animating-vue

5 min read
Last update: December 19, 2021

Page Transitions

Now that we understand how to use Vue’s transition component to create our own transitions, let’s apply this concept to a common use-case in a single page application: page transitions.

Prerequisite: This lesson assumes you have working knowledge of Vue Router.


Vue Router + Transitions

As a user navigates around our app, we can smooth out the way one view replaces another by using a page transition. Let’s look at how quickly we can reuse the fade transition from the previous lesson to fade between pages (i.e. route-level components).

Currently, in our example app, we have two routes: the newly renamed modal and about. If we open up our App.vue file, we can see that we already have a router-link for each route, and the router-view component below it. Because router-view is really just a dynamic component that is replaced by the modal or about component, we can wrap router-view with Vue’s transition component and use the fade transition here to fade in the page component we’re routing to.

📄 src/App.vue

<template>
    <div id="app">

        <div id="nav">
            <router-link to="/">Modal</router-link> |
            <router-link to="/about">About</router-link>
        </div>

        <transition name="fade">
            <router-view />
        </transition>

    </div>
</template>

Since our fade transition currently lives in Modal.vue, let’s move it into App.vue’s style section so we can use it globally throughout our app. Now, when we navigate between the modal and about routes, it’s already working for us.


Transition Modes

Currently, the way this transition happens, the content of the page being navigated away from fades out at the same time the new page fades in, creating a bit of a messy transition where content jumps into place. We can resolve this by utilizing Vue’s transition modes, which include:

  • in-out: The new element transitions in, then when complete, the current element transitions out.
  • out-in: The current element transitions out, then when complete, the new element transitions in.
  • (By default, the current element and new element will transition in and out simultaneously)

Let’s use the out-in mode to smooth out our fade transition. We do that by specifying it within the transition component’s mode attribute, like so:

📄 src/App.vue

<transition name="fade" mode="out-in">
    <router-view />
</transition>

Now as we can see, the page transition is a lot smoother. After one page fades out, the new page fades in.


Another Page Transition

Hopefully you’re feeling comfortable about implementing page transitions now that you’ve seen how simple it can be, but you might feel a bit underwhelmed that we merely reused the fade transition we’d already built. So let’s create a bit more nuanced page transition now.

A common way pages might transition into one another is in a horizontally scrolling manner. You might see this kind of transition in a blog or photo gallery, for example. We can achieve this effect by translating the X position as we animate the page components off and onto the screen (in addition to fading the opacity over time like before).

To start, when a component transforms onto the screen, we want it to come in a bit from the right. So we’ll set the starting state of the entering transition 10px over in the X direction, like so:

📄 src/App.vue

.slide-fade-enter {
transform: translateX(10px);
opacity: 0;
}

Notice how we’re also setting opacity to 0 like before.

When the component performs its leaving transition, where do we want it to leave to? We can do the inverse of our entering transition, and make it transition -10px to the left as it fades away. We’ll define that like so:

📄 src/App.vue

.slide-fade-leave-to {
transform: translateX(-10px);
opacity: 0;
}

Finally, how do we want this transition to behave while it’s happening? How long should it be, and should it have an easing function? We’ll set those active settings up in the .slide-fade-enter-active and .slide-fade-leave-active classes, leaving us with:

📄 src/App.vue

.slide-fade-enter {
transform: translateX(10px);
opacity: 0;
}

.slide-fade-enter-active,
.slide-fade-leave-active {
transition: all 0.2s ease;
}

.slide-fade-leave-to {
transform: translateX(-10px);
opacity: 0;
}

Now when we test this out in the browser, we see that our page components are fading out and in nicely in a horizontally scrolling manner. Note that here we are still using the mode="out-in" on our transition component to smooth out this transition.


Another Use Case

It’s worth noting that we aren’t limited to using these sort of transitions only when routing between pages. We may want to transition between components that are using the is attribute. We could also use this kind of transition in this case as well.


Let’s ReVue

In this lesson, we learned how simple it can be to use Vue’s transition component to create smooth page transitions as users navigate around our app, and how transition modes can help us modify that transition’s behavior. In the next lesson, we’ll learn how to transition groups of elements/components with Vue’s transition-group component.