Vue.js 2 Design Patterns and Best Practices

Using Animate.css

Now that we have Animate.css inside the project, we can change our App.vue to have a template with the following:

<template> <h1 class="animated fadeIn">Hello Vue!</h1></template>

Prior to adding any animations, we first need to add the animated class. Next, we can select any animation from the Animate.css library; we've chosen fadeIn for this example. This can then be switched out for other animations such as bounceInLeft, shake, rubberBand, and many more!

We could take our previous example, and turn this into a bound class value based on a Boolean - but transitions may be more exciting to look at.