Vue中实滚动加载动画的实现(随手笔记)

Vue中滚动加载动画的实现

使用wowjs和animate动画实现
1.下载插件wowjs

npm install wowjs --save

下载wowjs之后文件夹中会带有animate.css文件，可以不用再下载animate插件
2.在main.js文件中引入animate.css文件

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

3.在组件中的使用
(1)组件里面的引用

import {WOW} from 'wowjs'

(2)wow的使用
在mounted中使用wow

mounted() {
	this.$nextTick(() => {
		var wow = new WOW({
				boxClass: 'wow', ///动画元件css类（默认为wow）
				animateClass: 'animated', //动画css类（默认为animated） 
				offset: 0, //到元素距离触发动画（当默认为0） 
				mobile: true, //在移动设备上触发动画（默认为true） 
				live: true //对异步加载的内容进行操作（默认为true）
			})
		wow.init()
	});
}

给需要加载动画的元素添加class

	<div class="wow fadeInLeftBig" data-wow-duration="1s" data-wow-delay="0s"></div>
	//wow 这个class必须加，对应的是js中的boxClass
	//fadeInLeftBig是animate动画的class
	//data-wow-duration是动画加载时间
	// data-wow-delay是动画加载延迟