Nuxt: how to animate transition between pages

Nuxt: how to animate transition between pages cover

Introduction

When we think about a good app we also think about a great user experience. Animating pages when you click on links helps to understand that an operation is running.

In this article we will see how to add animations between nuxt pages.

Why this article ?

It's part of my blog category "Nuxt in here". This is a big tutorial compilation where the subject is nuxt and aoooio implementation.

What we will see:

  • 1 | Requirement
  • 2 | Project structure
  • 3 | Create animated transition between two pages.

1 Requirement

You will need a blank Nuxt application to follow this tutorial. I wrote an article explaining how to do this with vue-cli: Aooo.io article

If you already have a vue-cli environnement setup, just start a new project:

vue init nuxt-community/starter-template anime-tutorial

2 Project structure

You now have a standard Nuxt project structure in the folder anime-tutorial. We will now have to create two page for our project redirecting to each other to see the benefits of animating.

2.1 Index page

<template>
    <nuxt-link to="transition" class="container">
        ...I love transitions!
    </nuxt-link >
</template>
<script>
    export default {}
</script>
<style>
    .container {
        width:100%;
        height:100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:3em;
    }
</style>

2.1 Transition page

We will now create a transition.vue pages. As usual you have to put it in /pages folder to let Nuxt know that he has to create a 'transition' url.

<template>
    <nuxt-link to="/" class="container">
        ...Hey! i love transitions too!
    </nuxt-link >
</template>
<script>
    export default {}
</script>



<style scoped>
    .container {
        width:100%;
        height:100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

3 Create animated transitions between two pages.

We now want each page to be animated when a nuxt link is clicked. To do so nuxt provide some predefined classes corresponding on the component state: .page-enter: Active when a page is initialized. .page-enter-active: Active during the 'entering' animation of the page .page-leave-active Active during the 'leaving' animation of the page

With these css state we can easily add a fade in animation to our pages. We will now edit the default layout file /layouts/default.vue to add these classes to our style.

<style>
.page-enter-active, .page-leave-active {
    transition: opacity .5s
}
.page-enter, .page-leave-active {
    opacity: 0
}
<style>

We can now verify the result lauchning the dev server from the terminal in our folder.

npm run dev

You can now open your browser on the localhost:3000 URL… And that's it ! Hope this was interesting. If you want more precision on advanced animation techniques, you can go to the official documentation with this link