wow.js+animate.css+vue implements animation during display
Step one:
npm install wow.js, and animate after installation .css will be installed automatically
npm install wowjs --save-dev
Step 2:
Introduce animate.css into main.js
import animated from 'animate.css'
Vue.use(animated)
Step 3:
Introduce wow.js into the required components
import { WOW } from 'wowjs'
Step 4:
Initialize in mounted() life cycle hook
mounted(){
const wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true
})
wow.init();
}
Step 5:
Add the class name wow and animation.css animation class to the element that needs animation. You can also add data-wow-duration (animation Duration), data-wow-delay (animation delay time), data-wow-offset (how many pixels from the bottom after the element's position is exposed) and data-wow-iteration (number of animation executions) are optional. Select
<div class="wow slideInUp" data-wow-duration="1s" ></div>
<div class="wow slideInUp" data-wow-duration="1s" data-wow-delay="1s" ></div>
Parameter Description: