Vue Directive For Animate.css

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

October 18, 2021 Animation