vue使用wow.js

1.npm安装wow.js

npm install wowjs --save-dev

animate.css会自动安装

因为wow.js在animate.css基础上

main.js中引入animate.css

import 'animate.css'

在需要使用的地方引入wowjs

有两种引入使用方式：

1. import {WOW} from 'wowjs'    mounted() { new WOW().init() }

2.import WOW from 'wowjs'    mounted() { new WOW.WOW().init() }

mounted(){
    let wow = new WOW({
			boxClass: 'wow',    //需要执行动画的元素的 class
			animateClass: 'animated',        //animation.css 动画的 class
			offset: 0,            //距离可视区域多少开始执行动画
			mobile: true,        //是否在移动设备上执行动画
			live: true        //异步加载的内容是否有效
		});
		wow.init();
}

 标签使用

<div class="wow animate__animated animate__flipInX" data-wow-duration="1.1s"><div/>