vue中使用wow.js+animate.css实现页面滚动加载元素动画

1.npm 安装 wow.js，安装后 animate.css 会自动安装

npm install wowjs --save-dev

或者使用yarn安装

yarn add wow.js

2.在main.js中引入animate.css

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

3.在需要的组件中引入 wow.js

import WOW from 'wowjs';

4.在 mounted() 生命周期钩子中初始化

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

5.在需要动画的元素上面加上类名 wow 和 animation.css 动画的 class

<h2 class="core_tit wow fadeInUp">核心功能</h2>
<div class="wow slideInUp" data-wow-duration="1s" data-wow-delay="1s" ></div>

还可以加上 data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和 data-wow-iteration（动画执行次数）这四个属性可选可不选