Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Learn how to Create Vue Router Animations - Transitions Between Pages

By Gary simon - Feb 23, 2018

A huge trend that I believe we're going to see -- and not just a trend, I think it's something that will stick -- is created seamless transitions between separate pages of both apps and websites.

The major frontend JavaScript frameworks allow you to do this, and Vuejs is one that makes it really easy to do without a lot of setup.

In this tutorial, I'm going to walk you through a brand new project from scratch, and setup our own router-based animations.

Let's get started!

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Starting a New Vue Project

Using the Vue CLI, (make sure you have version 3.0+), we're going to start a new project with the vue create command:

> vue create vue-router-anims

Note: With the Vue CLI 3+ versions, you will need yarn installed.

Next, you will have a few prompts. We want to manually select the features we want with the Router (hit your spacebar and up/down keys to choose):

? Please pick a preset: Manually select features
? Check the features needed for your project:   
 ( ) TypeScript                                 
 ( ) Progressive Web App (PWA) Support          
>(*) Router                                     
 ( ) Vuex                                       
 ( ) CSS Pre-processors                         
 ( ) Linter / Formatter                         
 ( ) Unit Testing                               
 ( ) E2E Testing                                

Hit enter. Then, you can choose either dedicated config files or *package.json* for the next prompt.

Let it install and then hop into the new folder and serve it up:

> cd vue-router-anims
> yarn serve

Setting up the Pages

Before we get to the actual part where we place the router animations, let's clean up a few of the files the CLI generated so that we have a better template and styling to work with.

First, visit /src/components/HelloWorld.vue and empty out the template section:

<template>
  <div class="hello">

  </div>
</template>

Then, visit /src/views/About.vue and adjust the template to:

<template>
  <div class="about page">
    <h1>This is an about page</h1>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente consequatur facilis consequuntur, voluptatibus, voluptas aut mollitia aspernatur illo alias neque architecto et dicta necessitatibus nobis nisi ipsum consectetur eius quam!</p>
  </div>
</template>

Notice, we're applying an additional class of .page to the first div. That's because we're going to reference it in CSS to make an important change to the container.

And Home.vue to:

<template>
  <div class="home page">
    <h1>This is lovely</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente consequatur facilis consequuntur, voluptatibus, voluptas aut mollitia aspernatur illo alias neque architecto et dicta necessitatibus nobis nisi ipsum consectetur eius quam!</p>
  </div>
</template>

Next, visit /src/App.vue and adjust the <style> section to:

<style>
  @import "https://cdn.jsdelivr.net/npm/animate.css@3.5.1";

  body {
    background: rgb(233, 233, 233);
    font-family:Arial, Helvetica, sans-serif;
  }
  html, body {
    height: calc(100% - 50px);
  }

  #app {
    background: #fff;
    width: 50%;
    padding: 30px;
    border-radius: 10px;
    margin: 50px auto 0 auto;
    height: calc(60% - 50px);
  }

  .page {
    position: fixed;
    width: inherit;
  }

</style>

These are just a few rulesets to make things look better in the browser, along with importing Animate.css for some quick animation classes.

.page sets the position to fixed, which allows for a smooth and seamless animation transition between the vue routes.

Defining the Router Animation

The first step requires modifying the template. In the same file, we're going to wrap a <transition .. element around the <router-view />:

<transition name="router-anim" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutDown">
   <router-view/>
</transition>

 Any element contained within this transition property will now animate.

The enter-active-class and leave-active-class allow us to attach user-specified animation classes to the different Vuejs animation states.

Check out Animate.css for the different classes you can use.

View the result in the browser and click between the navigation links:

Specifying Custom Animations

You may need custom animations and don't want to rely on a third party animation library. Plus, custom animations give you more control over your animations, and you can create more complex sequences.

First, let's modify the template:

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

The name bound to router-anim is the CSS ruleset name prefix we will use to define animation in the style section of the component.

Add the following CSS:

.router-anim-enter-active {
  animation: coming 1s;
  animation-delay: .5s;
  opacity: 0;
}
.router-anim-leave-active {
  animation: going 1s;
}

@keyframes going {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50px);
    opacity: 0;
  }
}
@keyframes coming {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

If you view the result in the browser, you will now find our custom animation works between page routes!

Conclusion

 

While this just scratches the surface of what you can do with router animations, it should provide you with a great starting point. If you're a bit creative, you can create some truly awesome page transition animations within Vue.js using CSS animations.

Good luck!


Share this post




Say something about this awesome post!