辅助动画wowJS的使用

  1. 说明:长页面滚动条,往下滚动的时候,需要实现一些animate的淡入淡出的效果,要使滚动到对应位置才执行动画,可以用wowjs

  2. 下载依赖包:"animate.css": "^3.7.2", "wowjs": "^1.1.3"

  3. 引用:

    mounted() {
         // 手动引入wow动画库
        const WOW = require("wowjs").WOW;
        window.scrollTo(0, 0);
        document.title = "南方测绘 用户大会" || this.$route.meta.title;
        this.$nextTick(() => {
          // 在dom渲染完后, 再执行动画;
          var wow = new WOW({
            boxClass: "wow", ///动画元件css类(默认为wow)
            animateClass: "animated", //动画css类(默认为animated)
            offset: 0, //到元素距离触发动画(当默认为0)
            mobile: true, //在移动设备上触发动画(默认为true)
            live: true //对异步加载的内容进行操作(默认为true)
          });
          wow.init();
        });
      },
          
     //页面
          <div class="wow fadeInUp"
          data-wow-duration="2s"
          data-wow-delay=".2s"
          data-wow-iteration="1s">
          </div>
    
posted @ 2022-02-27 14:52  LL幻  阅读(149)  评论(0)    收藏  举报