关于wowjs
滚动加载页面的插件(很好用,让你的页面变得精致起来)
安装css
yarn add animate.css -S
安装wowjs
yarn add wowjs -S
在main.js中引入
import wow from 'wowjs'
Vue.prototype.$wow = wow
此处animate.css的版本是‘^4.1.1’,
版本很重要,3.xxx的版本和此版本引入方式不同
import 'animate.css'
div内设置class内容(此处是4.0版本使用的class样式,<div class="wow slideInUp " >这种形式的我的页面无法呈现动画,所以使用了这种,应该是wowjs安装时自带animate.css,class的定义名字是这种,而我们选择的是yarn安装animate.css,直接main.js引入,所以不会生效)
我的页面正解:<div class="wow animate__animated animate__slideInUp " >
使用的页面引入
import { WOW } from 'wowjs'
mounted() {
var wow = new WOW({
boxClass: "wow",
animateClass: "animated",
offset: 0,
mobile: true,
});
wow.init();
}