最近开发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遇到的一些问题,希望能帮到需要的人。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。