Fork me on GitHub


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);
Or
<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)
{{ a }}


Made with favorite by Jofferson Ramirez Tiquez