Creating transitions in your Vue app with Vue Router

What is Vue Router?

Vue Router is the official routing library for Vue.js applications. Even though you can go ahead and use other generic routing libraries, Vue Router deeply integrates with the ideology of Vue.js to make Single Page Applications (SPAs) easy to build.

In this article, we will be looking at how to improve the user experience in your Vue applications easily by creating transitions while routing with Vue Router.

So, why use transitions in your app?

I’ll be talking a little bit about why you might need transitions in the first place.

A website is typically made up of a collection of web pages. Movement from one webpage to the other is pretty much unavoidable, and the interaction between the website and the page movement plays a fundamental role in shaping the experience that users have on our website.

As much as possible, we should build linearity into the interaction of our websites — when a user clicks a link, they should not feel like they are starting a new experience all over again. Instead, there should be a continued experience and build up.

Imagine going from chapter one in a book to chapter five without any linearity. Even though you may understand what chapter five talks about and eventually continue enjoying the book, there will be a break in the experience. This break in experience can be softened or even removed with the use of transitions.

Creating transitions

Vue Router makes it super easy to include transitions in your Vue app. In this article, we will be looking at how you can enable three delightful transitions in your Vue app. We will be working mainly with two components:

Transitions – Wrapper components from Vue that add transition effects to HTML or Vue elements whenever an element enters or leaves the DOM. In the <transition> component, the name attribute is used to add a transition class. Vue automatically gives us six classes prefixed with the value of the name attribute. These classes are applied during the life cycle of the transition. The classes can be broken into two groups depending on what happens when the element enters and leaves the DOM:

• enter: This class defines the starting state of the element before it undergoes the transition. It is in effect just before the element is inserted
• enter-active: This class defines what happens when the element is being inserted into the DOM. It can be used to define the duration of the entering transition
• enter-to: This class defines what happens just after the element has been inserted into the DOM. It is removed once the entering transition finishes
• leave: This class defines the leaving state of the element. It is in effect just before the element is removed from the DOM
• leave-active: This class defines what happens during the element’s leaving phase. It can be used to define the duration of the leaving transition
• leave-to: This class defines what happens just after the element has been removed from the DOM. It is removed once the removing transition finishes
• router-view: This component is provided by Vue Router. It renders the component that matches a path specified in the Vue Router instantiation

Types of transition

• Slide-fade
• Fade
• Custom transition classes

Note: This tutorial assumes you’re familiar with setting up a Vue application with Vue Router.

Slide fade transition example

App.vue

<template>
  <div id="app">
    <ul>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact us</router-link>
    </ul>
    <transition name="slide-fade">
      <router-view class="view"/>
    </transition>
  </div>
</template>
<script>
  export default {}
</script>
<style>
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to{
  transform: translateX(10px);
  opacity: 0;
}
</style>

Fade transition example

App.vue

<template>
  <div id="app">
    <ul>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact us</router-link>
    </ul>
    <transition name="fade">
      <router-view class="view"/>
    </transition>
  </div>
</template>
<script>
export default {}
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .4s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

Custom transition classes

Add the animate.css CDN link to the HTML file in your public folder like so:

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

App.vue