wow.js+animate.css+vue implements animation during display

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:

 

Guess you like

Origin blog.csdn.net/qq_38210427/article/details/130516687