vue页面滚动动画—

WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件。

缺陷：当页面向下滚动时，动画出现；当页面向上回滚时，动画不会回退。（即动画仅出现一次！）

官网地址 https://www.delac.io/wow/

Demo演示-仿oppo首页 https://www.dowebok.com/demo/131/index2.html

1. 安装

2. 配置

3. 使用

4. 自定义动画持续时间

5. 自定义动画延迟时间

6. 自定义滚动距离

7. 自定义动画重复次数

完整范例代码

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', // defaultanimateClass: 'animated', // defaultoffset: 150, // defaultmobile: true, // defaultlive: 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>