Category: Animation

Latest free Vue.js components, plugins, and other related libraries for handling animations on your web applications.

Vue Directive For Animate.css

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