最近开发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遇到的一些问题,希望能帮到需要的人。


我的一个道姑朋友
80 声望4 粉丝

星光不问赶路人,岁月不负有心人。