Vue Directive For Animate.css

Install & Download:

# Yarn
$ yarn add v-animate-css
# NPM
$ npm install v-animate-css --save

The easiest way to implement Animate.css based CSS3 animations on your Vue.js web app.

1. Import and register the animate.css directive.

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

Vue.use(VAnimateCss);

2. Apply an animate.css powered animation to the element.

<div v-animate-css="'fadeIn'">
  Fade In On Page Load
</div>

3. Trigger the animation on click or hover.

<div v-animate-css.click="'fadeIn'">
  Click Me
</div>
<div v-animate-css.hover="'fadeIn'">
  Hover Over Me
</div>

4. You can also config the animation using a JS object:

<div v-animate-css.click="animationObject">
  Click Me
</div>

animationObject:{
  classes: 'fadeIn',
  delay: 100,
  duration: 3000
}

5. Determine whether to loop the animation.

animationObject:{
  classes: 'fadeIn',
  duration: 3000,
  iteration: 'infinite',
}

v0.0.5 (10/18/2021)