Using the Animate.css Library

# Using Animate.css in Vue

# Custom Transition Classes

We can customize transition class names through the following attributes:

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+) They have a higher priority than regular class names, which is especially useful when integrating Vue's transition system with other third-party CSS animation libraries, such as Animate.css (opens new window).

# Using the Animate.css Library

<transition
            name="custom-classes-transition"
            enter-active-class="animated tada"
            leave-active-class="animated bounceOutRight"
            >
    <p v-if="show">hello</p>
</transition>

1
2
3
4
5
6
7

Follow the official documentation (opens new window) to import the Animate.css library, then combine it with Vue's custom transition classes. Specify the enter-active-class and leave-active-class custom classes -- both must include the animated class to indicate they are using the Animate.css library, plus another animation class name based on your needs.

Animation class names: Get them from the Animate official website (opens new window).