(v-animate-css)
The easiest to implement Vue directive for Animate.css
Star on GitHub
npm install v-animate-css --save
yarn add v-animate-css
https://unpkg.com/v-animate-css/dist/v-animate-css.js
import { createApp } from 'vue'; import VAnimateCss from 'v-animate-css'; const app = createApp({}) app.use(VAnimateCss); app.mount("#app")
<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>
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")
Start the animation on page load.
Directivev-animate-css="'fadeIn'"
Start the animation on click event.
Directivev-animate-css.click="'tada'"
Start the animation onmouseover
to the element.
v-animate-css.hover="'rotateIn'"
Start the animation on click event, with 500ms delay and 100ms animation duration.
Directivev-animate-css.click="animationObject"
animationObject: { classes: 'tada', delay: 500, duration: 1000 }Output
Start the animation on page load, with 5000ms animation duration and infinite iteration.
Directivev-animate-css.click="animationInfinite"
animationInfinite: { classes: 'fadeIn', duration: 5000, iteration: 'infinite' }Output
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.
|
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 |