Vue Animate CSS

(v-animate-css)

The easiest to implement Vue directive for Animate.css

Star on GitHub

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 { createApp } from 'vue';
import VAnimateCss from 'v-animate-css';

const app = createApp({})

app.use(VAnimateCss);
app.mount("#app")
          

OR
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><script>
<script src="https://unpkg.com/v-animate-css/dist/v-animate-css.js"><script>

<script>
    const { createApp } = Vue
    const app = createApp({...});
    app.use(VAnimateCss.default);
    app.mount("#app");
</script>
          

Inject Local CSS


Related to Issue#33 it make sense to give the user the option to add their own local version of Animate.css instead of relying to the default CDN version of Animate.css within the plugin.

You can do it using the new animateCSSPath option.

import { createApp } from 'vue';
import VAnimateCss from 'v-animate-css';

const app = createApp({...})

app.use(VAnimateCss, { animateCSSPath: './local-animate-css-file.css' });

// You can also use this option to inject a newer version of Animate.css

app.use(VAnimateCss, { animateCSSPath: 'cdn-link-to-a-newer-animate-css-version' });

app.mount("#app")
          

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)


Made with favorite by Joff Tiquez and OSSPH