最近开发pc官网,用到了wow.js这个动画插件,在这里记录一下应用过程中遇到的问题。
引入的办法网上能找到很多:
通过npm装置:npm install wowjs --save-devanimate.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遇到的一些问题,心愿能帮到须要的人。