最近开发 pc 官网,用到了 wow.js 这个动画插件,在这里记录一下应用过程中遇到的问题。
引入的办法网上能找到很多:
通过 npm 装置:npm install wowjs --save-dev
animate.css 会主动装置。在 main.js 中引入 animate.css
接下来放在我的项目中应用了,我把它做成了一个办法,放在 methods 里
// wow 动画
wowFun() {
var wow = new WOW({
// 间隔可视区域多少开始执行动画
offset: 150,
// 异步加载的内容是否无效
live: true,
});
wow.init();},
如果该页面所有的内容都是动态的,那就间接在 mounted 外面调用一下就好了。
然而我的网站有好多内容都是 ajax 申请回来的,就不能那样写了。
Home().then((response) => {console.log(response.data, "Home");
if (response.data.ReturnCode == 0) {if (response.data.Data) {
var data = response.data.Data;
this.ListBanner = data[0].ListBanner;
// this.ListNews = data[0].ListNews;
this.ListPhysician = data[0].ListPhysician;
this.$nextTick(() => {this.wowFun();
});
// console.log(this.ListNews);
// new WOW().init();
}
}
});
我这边动画失效的写法是申请数据胜利之后,放在了 this.$nextTick 外面调用。对应的 html 增加“wow fadeInUp”这个 class,更多动画,参考:wow.js 官网
我在开发过程中还遇到了一个动画不失效的问题,重复查问,原来是给 body 和 html 设置了高度 100%,高度去掉就好了。
这是我在 vue 中应用 wow.js 遇到的一些问题,心愿能帮到须要的人。