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.
