Vue Directive For Animate.css

Description:

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

How to use it:

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',
}

Preview:

Vue Directive For Animate.css

Changelog:

v0.0.5 (10/18/2021)

  • Refactor

Download Details:

Author: jofftiquez

Live Demo: https://jofftiquez.github.io/v-animate-css/

Download Link: https://github.com/jofftiquez/v-animate-css/archive/master.zip

Official Website: https://github.com/jofftiquez/v-animate-css

Install & Download:

# Yarn
$ yarn add v-animate-css

# NPM
$ npm install v-animate-css --save

You Might Be Interested In:

Add Comment