辅助动画wowJS的使用
-
说明:长页面滚动条,往下滚动的时候,需要实现一些animate的淡入淡出的效果,要使滚动到对应位置才执行动画,可以用wowjs
-
下载依赖包:"animate.css": "^3.7.2", "wowjs": "^1.1.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>

浙公网安备 33010602011771号