Vue Animate CSS

(v-animate-css)

The easiest to implement Vue directive for Animate.css

Installation

NPM

npm install v-animate-css --save

Yarn

yarn add v-animate-css

CDN

https://unpkg.com/v-animate-css/dist/v-animate-css.js

Usage

import Vue from 'vue';
import VAnimateCss from 'v-animate-css';

Vue.use(VAnimateCss);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"><script>
<script src="https://unpkg.com/v-animate-css/dist/v-animate-css.js"><script>

<script>
  Vue.use(VAnimateCss.default);
</script>

Demo

Simple

Start the animation on page load.

Directive
v-animate-css="'fadeIn'"

Output

This is a div and nothing but a div

Refresh the page to see the animation.

Click

Start the animation on click event.

Directive
v-animate-css.click="'tada'"

Output

Hover

Start the animation onmouseover to the element.

Directive
v-animate-css.hover="'rotateIn'"

Output

Object

Start the animation on click event, with 500ms delay and 100ms animation duration.

Directive
v-animate-css.click="animationObject"

Data

animationObject:{
  classes: 'tada',
  delay: 500,
  duration: 1000
}

Output

Infinite

Start the animation on page load, with 5000ms animation duration and infinite iteration.

Directive
v-animate-css.click="animationInfinite"

Data

animationInfinite: {
  classes: 'fadeIn',
  duration: 5000,
  iteration: 'infinite'
}

Output

API

Modifiers

This directive has 3 main modifiers click, hover and once.

Modifier	Description
`click`	This tells the directive to start the animation upon clicking the component. E.g. Button.
`hover`	This tells the directive to start the animation upon `onmouseover` event.
`once`	When `once` modifier is used, the directive will do the animation only once.

Animation using object

Aside from plain usage v-animate-css="'animation'", this directive can also accept an object, with different options.

  {
    classes: 'bounce',
    delay: 1000,
    duration: 1000,
    iteration: 5, // the animation will repeat 5 times.
  }

Option	Description	Required?
`classes`	The type of animation to be used.	YES
`delay`	The amount of delay time before the animation starts, in millis.	OPTIONAL
`duration`	The amount of time should the animation last, in millis.	OPTIONAL
`iteration`	The number of times the animation will be repeated. Any whole number or `infinite` for infinite iteration.	OPTIONAL

Available Animations

Animation (Click the items to try the animations)