WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件。
缺陷：当页面向下滚动时，动画出现；当页面向上回滚时，动画不会回退。（即动画仅出现一次！）
官网地址 https://www.delac.io/wow/
Demo演示-仿oppo首页 https://www.dowebok.com/demo/131/index2.html
1. 安装
npm install wowjs --save-dev
animate.css会自动安装
2. 配置
main.js中
// 动画 animate.css require('animate.css/animate.min.css'); // 滚动动画 wow.js import {WOW} from 'wowjs' Vue.prototype.$wow = new WOW({ boxClass: 'wow', // default animateClass: 'animated', // default offset: 150, // default mobile: true, // default live: false, // live为true时，控制台会提示：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content. callback: function(box) { console.log("WOW: animating <" + box.tagName.toLowerCase() + ">") } })
| 属性/方法 | 类型 | 默认值 | 说明 |
| boxClass | 字符串 | ‘wow’ | 需要执行动画的元素的 class |
| animateClass | 字符串 | ‘animated’ | animation.css 动画的 class |
| offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
| mobile | 布尔值 | true | 是否在移动设备上执行动画 |
| live | 布尔值 | true | 异步加载的内容是否有效 |
offset为0时，设置动画的元素在出现在浏览器可视区域时执行动画
3. 使用
在需要添加滚动动画的 .vue文件中，先初始化wow
mounted() { this.$nextTick(()=>{ this.$wow.init() } ) },
异步加载部分，使用watch初始化
watch: { xxxx() { this.$nextTick(() => { // 在dom渲染完后,再执行动画 this.$wow.init() }) } }
完成初始化后，在需要添加动画的元素上，添加上相关动画的类名即可
<div class="wow animate__animated animate__fadeIn">900</div>
wow 为配置中的动画类名，必要！
animate__animated animate__fadeIn 为animate.css 的动画效果，更多动画效果详情见 https://blog.csdn.net/weixin_41192489/article/details/111083527
4. 自定义动画持续时间
添加 data-wow-duration="2s"
<div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div>
5. 自定义动画延迟时间
添加 data-wow-delay="5s"
<div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div>
6. 自定义滚动距离
添加 data-wow-offset="200" 效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离）
<div class="wow animate__animated animate__fadeIn" data-wow-offset="200">900</div>
7. 自定义动画重复次数
添加 data-wow-iteration="2" 效果：动画会连续播放2次
<div class="wow animate__animated animate__fadeIn" data-wow-iteration="2" >900</div>
若想动画无限重复播放，则使用 data-wow-iteration="infinite"
<div class="wow animate__animated animate__fadeIn" data-wow-iteration="infinite" >900</div>
完整范例代码
<template> <div> <div class="box100">0</div> <div class="box100">100</div> <div class="box100">200</div> <div class="box100">300</div> <div class="box100">400</div> <div class="box100">500</div> <div class="box100">600</div> <div class="box100">700</div> <div class="box100">800</div> <div class="box100 wow animate__animated animate__fadeIn" >900</div> <div class="box100">1000</div> <div class="box100">1100</div> <div class="box100">1200</div> </div> </template> <script> export default { mounted() { this.$nextTick(()=>{ this.$wow.init() } ) }, } </script> <style scoped> .box100 { height: 100px; background: #3a8ee6; border: 1px solid black; } </style>
