vue3使用wow.js实现网页动画

实现效果

效果就是类似于网页各个板块的加载动画，当你控制滚动条滑动到某个板块进行显示时，当前在可是范围内的板块会根据设定好的动画以及动画时间显示出来。

WoW.JS官网

注意点：配合animate.css更好

1.安装wow.js

npm install wow.js --save

2.安装 animate.css

npm install animate.css --save

3.使用animate

在main.ts中
使用animate.css的方式
import "animate.css/animate.min.css";
使用wow中animate的方式
import "wow.js/css/libs/animate.css";

4.使用wow.js，
在需要使用的页面

onMounted() {
    new this.$wow.WOW().init()
    或者自由配置
     new WOW({
        boxClass: "wow", // 我理解为wow自带类名
        animateClass: "animated", // 看成animate的类名
        offset: 100, //元素距浏览器底部偏移量
        mobile: true, // 是否在移动端奏效
        live: false, // 是否热更新元素
        callback: function (box) {
          // the callback is fired every time an animation is started
          // the argument that is passed in is the DOM node being animated
        },
        scrollContainer: null, // optional scroll container selector, otherwise use window,
        resetAnimation: true, // reset animation on end (default is true)
      }).init();
}

wow.js配置

data-wow-duration（动画持续时间)

data-wow-delay（动画延迟时间）

data-wow-offset（元素的位置露出后距离底部多少像素执行）

data-wow-iteration（动画执行次数）

例子：

 <section class="section wow animate__animated animate__fadeInLeft" 
 		data-wow-duration="2s" 
 		data-wow-offset="200"
 		data-wow-iteration="3"
 >
  我是板块
</section>

---

扩展：浏览器触底加载数据

思路：
1.监听浏览器触底时触发函数；
2.使用防抖(节流)，每次触底时候一秒后触发函数

监听滚动条触底时

	滚动条函数
   const handleScroll = () => {
      var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowheight是可视区的高度
      var windowheight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollheight是滚动条的总高度
      var scrollheight = document.documentElement.scrollHeight || document.body.scrollHeight;
      // 到达底部时
      if (scrolltop + windowheight == scrollheight) {
        //写后台加载数据的函数
        //防抖
        deBounce(LazyMsg, 1000)
        //节流
		throttle (LazyMsg, 1000)
      }
    }
	监听滚动条
	onMounted(() => {
      window.addEventListener('scroll', handleScroll, true);
    })
  	销毁监听监听
	onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll, true);
    })
	防抖：
	var timer = null;
	const deBounce = (fn, delay) => {
	  clearTimeout(timer);
	  timer = setTimeout(function () {
	    fn();
	  }
	// 节流
	var timer2 = null;
	const throttle = (fn, delay) => {
	  if (timer2) {
	    return;
	  }
	  timer2 = setTimeout(function () {
	    fn();
	    timer2 = null;
	  }, delay);
	};		

总结

wow.js的特点就是能够控制元素偏移量来触发动画，这一点比昨天推荐的vue-animate-onscroll好，但是它不能像vue-animate-onscroll一样，当元素离开窗口可视范围后，重新进入又会控制动画显示。要是能把这两点结合起来就好，其实也能够自己去实现，但是从大众的角度来看，一般只需要初次加载元素时的动画就够了。