Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例

Posted 2022-04-07 JackieDYH

说明

wowjs-当页面向下滚动时，动画出现；当页面向上回滚时，动画不会回退。 

安装

npm install wowjs --save-dev
npm install animate.css --save

方式一 -全局引入

main.js

// 使用样式库
import animated from 'animate.css';
Vue.use(animated);

// 滚动动画 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时，设置动画的元素在出现在浏览器可视区域时执行动画

使用

.vue文件中，先初始化wow

// watch: 
// 异步加载部分，使用watch初始化
//   xxxx() 
//     this.$nextTick(() => 
//       // 在dom渲染完后,再执行动画
//       this.$wow.init();
//     );
//   ,
// ,
mounted() 
this.$nextTick(() => 
  this.$wow.init();
);
,

完成初始化后，在需要添加动画的元素上，添加上相关动画的类名即可
 <div class="wow animate__animated animate__fadeIn">900</div>
	wow 为配置中的动画类名，必要！
	animate__animated animate__fadeIn 为animate.css 的动画效果

1. 自定义动画持续时间
添加 data-wow-duration="2s" 
<div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div>

2. 自定义动画延迟时间
添加 data-wow-delay="5s"
<div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div>

3. 自定义滚动距离
 添加 data-wow-offset="200"   效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离）
<div class="wow animate__animated animate__fadeIn" data-wow-offset="200">900</div>

4. 自定义动画重复次数
 添加 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 class="warp">
    <span>内容</span>
    <div class="wow animate__animated animate__fadeIn">900</div>
    <div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">
      900
    </div>
    <div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">
      900
    </div>
    <div style="height: 1200px"></div>
    <!--  添加 data-wow-offset="200"   效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离） -->
    <div class="wow animate__animated animate__fadeIn" data-wow-offset="200">
      900
    </div>
    <div style="height: 1300px"></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 
  name: "home2",
  components: ,
  data() 
    return ;
  ,
  // watch: 
  // 异步加载
  //   xxxx() 
  //     this.$nextTick(() => 
  //       // 在dom渲染完后,再执行动画
  //       this.$wow.init();
  //     );
  //   ,
  // ,
  mounted() 
    this.$nextTick(() => 
      this.$wow.init();
    );
  ,
  methods: ,
  destroyed() ,
;
</script>

<style lang="scss" scoped>
.box100 
  height: 100px;
  background: #3a8ee6;
  border: 1px solid black;

</style>

方式二-局部引入

main.js

import animated from 'animate.css'
Vue.use(animated)

使用

//.vue文件

import  WOW  from 'wowjs'

//初始化wow.js
mounted()
var wow = new WOW(
	boxClass: 'wow',    //需要执行动画元素的Class
	animateClass: 'animated',    //animation.css动画的Class
	offset: 0,    //距离可视区域多少开始执行动画
	mobile: true，    //是否在移动设备执行动画
	live: true    //异步加载的内容是否有效
	)
	wow.init();




//属性
data-wow-duration：更改动画持续时间 data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）

---

全量代码

<template>
  <div class="warp">
    <span>内容</span>
    <div class="wow animate__animated animate__fadeIn">900</div>
    <div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">
      900
    </div>
    <div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">
      900
    </div>
    <div style="height: 1200px"></div>
    <!--  添加 data-wow-offset="200"   效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离） -->
    <div class="wow animate__animated animate__fadeIn" data-wow-offset="200">
      900
    </div>
    <div style="height: 1300px"></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>
import  WOW  from "wowjs";
export default 
  components: ,
  data() 
    return ;
  ,
  computed: ,
  mounted() 
    this.$nextTick(() => 
      let wow = new WOW(
        boxClass: "wow", //需要执行动画元素的Class
        animateClass: "animated", //animation.css动画的Class
        offset: 0, //距离可视区域多少开始执行动画
        mobile: true, //是否在移动设备执行动画
        live: false, //异步加载的内容是否有效
      );
      wow.init();
    );
  ,
;
// 介绍
// data-wow-duration：更改动画持续时间 data-wow-delay：动画开始前的延迟
// data-wow-offset：开始动画的距离（与浏览器底部相关）
// data-wow-iteration：动画的次数重复（无限次：infinite）
</script>
<style lang="scss" scoped >
.warp 
  font-size: 30px;
  .box100 
    height: 100px;
    background: #3a8ee6;
    border: 1px solid black;
  

</style>