Animation in Vue.js Part01: <Transition> intro and basic usage

self-learning note— use `<transition> in vue.js`

4 min readApr 8, 2020

Overview

Moving shape and animation is attractive and exciting when it appears on the website, but how to implement that in Vue.js?

Except the CSS Animation or some other Plug-in, <transition> is an amazing answer you need, let’s take a look and deal with it!

Preparation: Animate.CSS

Before we start, we will install the Animate.CSS library to boost our work. You can use npm or yard to install the package into Vue.

$ npm install animate.css --save$ yarn add animate.css

Then, add outer CDN into your <head> in index.html

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">// or<link rel="stylesheet" href="animate.min.css">
</head>

After that, you can add just animated in the class name and call the animation from the library. If you want to know more details you can check the official documentation in the Github.

<h1 class="animated bounce">Hello World!</h1>

Looks good hum? now let’s start our journey with <transition>!!

Introduction — Transition name and enter/leave animation

introduction

Vue provides a transition wrapper component, allowing you to add entering/leaving transitions for any element or component wrapped in the following context

conditional rendering or display v-if or v-show
Dynamic components
Component root nodes

<transition>
    <!-- the element or componet-->
</transition>

Enter/Leave and time

Vue-transition offers enter/leave transition for the element. Each Enter & Leave has its timing different to hang the class on. From an image above from official documentation, you can see the animation go from enter through the active and end at to you can see the difference in the following example.

enter + leave: animated class will be hanged at the very start timing in each enter and leave phase.

enter-active + leave-active: the fadeIn and fadeOut animation will work during the entire entering phase, and so does leaving phase.

enter-to + leave-to: the animated class will be hanged at the end of entering, so it will look shorter.

So, if the active looks good, why we need the first and third?

Here’s the example shows the amazing fade in and fade out animation with enter-active & leave-to in router render. You can use the enter, enter-active ,and enter-to in the proper timing to make the animation effect you like.

Transition Usage

Like we said above, Vue.js offers 6 basic transition attributes for the element wrapped in <transition>, it’s really convenient to use it with animate.css or other animation libraries.

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

Also, you can add your own CSS class in transition class to make the customized animation.

default transition example with customized CSS animation

Naming Transition with CSS

Another way to control the transition and animation is name attribute. You can attach the String in name which you gave to <transition> to class name, Vue will grab the class and hang it to the element in transition, then render the animation.

<transition name="something">
    <!-- component or element -->
</transition><style>.something-enter-active-class{
    /* add your animation or transition here */
}
.something-leave-active-class{
    /* add your animation or transition here */
}</style>

Naming transition and customized CSS animation

Review & Next

Use animation and transition in the website can make your website looks cooler and more interesting, and it can give website visitors better using-experience. Next phase I will keep talking about the advanced transition using, JavaScript hooks control, and component transition. Keep learning with me! If you have any question, welcome to do the comment to talk with me, thanks for your read!