Easiest to Implement Vue Directive For Animate.css Library

Vue Animate CSS is the easiest way to implement Animate.css based CSS3 animations on a Vue.js web application.

animate can be used in a directive, animate on scroll, animations examples, animation slide left and right, animate on scroll stackblitz

Table of Contents

How to make use of it:

Install and download:

# Yarn
$ yarn add v-animate-css

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

1. Import and register the animate.css directive.

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

Vue.use(VAnimateCss);

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

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

3. Play the animation on tap or swipe.

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

4. You can also configure the animation with a JS object:

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

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

5. Decide whether you want to repeat the animation or not.

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

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.

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

Vue Directive For Animate.css, Vue Animate CSS Plugin/Github

Official Website(jofftiquez): Click Here

This superior jQuery/javascript plugin is developed by jofftiquez. For extra Advanced Usages, please go to the official website.