Press "Enter" to skip to content

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

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

API


Modifiers

This directive has 3 main modifiers clickhover and once.

ModifierDescription
clickThis tells the directive to start the animation upon clicking the component. E.g. Button.
hoverThis tells the directive to start the animation upon onmouseover event.
onceWhen once modifier is used, the directive will do the animation only once.
OptionDescriptionRequired?
classesThe type of animation to be used.YES
delayThe amount of delay time before the animation starts, in millis.OPTIONAL
durationThe amount of time should the animation last, in millis.OPTIONAL
iterationThe 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


See Demo And Download

Official Website(jofftiquez): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.