vue中使用wowjs+animate

1.npm install wow.js, animate.css will be installed automatically after installation

npm install wowjs --save-dev

Or use yarn to install

yarn add wow.js

2. Introduce animate.css in main.js

import 'wowjs/css/libs/animate.css'

3. Introduce wow.js in the required components

import WOW from 'wowjs';

4. Initialize in mounted() lifecycle hook

mounted(){ let wow = new WOW.WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }); wow.init(); }

5. Add the class name wow and animation.css animation class to the elements that need animation

<h2 class="core_tit wow fadeInUp"> Core functions </h2> 

<div class="wow slideInUp" data-wow-duration="1s" data-wow-delay="1s" ></div>

 

posted @ 2022-03-16 20:10  jahoon  阅读(351)  评论(0)    收藏  举报