vue页面滚动动画——wow.js教程

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', // 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() + ">")
  }
})

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 的动画效果，更多动画效果详情

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>