Add Animation Effects Easily to our Vue App with the vue2-animate Library

Vue comes with animation and transition capabilities.

However, we have to add all the styles for the transitions ourselves.

The vue2-animate library makes this easier for us.

In this article, we’ll look at how to use the library to display animations.

Installation

We can install it by running:

npm i vue2-animate

Then we can import the CSS for the styles by writing:

import Vue from "vue";
import App from "./App.vue";
import "vue2-animate/dist/vue2-animate.min.css";
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

Adding the Animations

The vue2-animate library just provide the styles for some animation effects.

We just use it with the transition and transition-group components as we usually would.

For example, we write:

<template>
  <div>
    <button @click="add">add</button>
    <transition-group name="fadeLeft" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  data() {
    return {
      items: Array(5)
        .fill()
        .map(() => ({
          id: uuidv4(),
          text: Math.random()
        }))
    };
  },
  methods: {
    add() {
      this.items.push({
        id: uuidv4(),
        text: Math.random()
      });
    }
  }
};
</script>

to apply the fadeLeft transition effect when we add an item.

Also, we can set the enter-active-class , name , and leave-active-class to the values that are supposed by the library:

<template>
  <div>
    <button @click="toggle = !toggle">toggle</button>
    <transition name="bounce" enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">
      <p v-if="toggle">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggle: true
    };
  }
};
</script>

This lets us control the animation for finely.

We can also set the animation duration with the style attribute:

<template>
  <div>
    <button @click="toggle = !toggle">toggle</button>
    <transition name="fade">
      <p v-if="toggle" style="animation-duration: 0.3s">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggle: true
    };
  }
};
</script>

Use with Vue Router

We can add animation to route transitions with the bundled styles.

For example, we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import "vue2-animate/dist/vue2-animate.min.css";
import VueRouter from "vue-router";
Vue.use(VueRouter);
Vue.config.productionTip = false;
const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };

const routes = [
  { path: "/foo", component: Foo },
  { path: "/bar", component: Bar }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <router-link to="foo">foo</router-link>
    <router-link to="bar">bar</router-link>
    <transition
      enter-active-class="animated slideInRight"
      leave-active-class="animated slideOutLeft"
    >
      <router-view appear :key="$router.path"></router-view>
    </transition>
  </div>
</template>

<script>
export default {};
</script>

We add the routes with the routes array.

And we add the router to our Vue instance.

Then in App.vue , we put the router-view in the transition component.

The appear prop is required for the animation.

The key is also needed to identify when the transition should be shown.

We also have the enter-active-class and leave-active-class for the transition added to add the effects.

Conclusion

The vue2-animate library has the styles for Vue transitions so we don’t have to write our own styles.