vue门户网站，滚动到可视化区域展示动画效果方案

1.准备两个工具库：

（1.1） animate.css：动画库

（动画效果展示：Animate.css | A cross-browser library of CSS animations.）

（1.2）wowjs: 负责滚动到可视化区域，展示animate.css动画

2.代码实现

（2.1）插件安装

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

（2.2）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: 50, // 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() + ">")
  }
});

（2.3）在需要执行动画的xx.vue文件代码

<template>
    <li class="wow animate__animated animate__fadeInRight">
        <!-- 需要执行的动画内容 -->         
    </li>
</template>
<script>
export default {
  name: 'News',
  mounted() {
    this.$nextTick(() => {
      this.$wow.init()
    })
  }
}
</script>

3.wowjs简单属性介绍

属性/方法类型默认值说明
boxClass 字符串 ‘wow’ 需要执行动画的元素的 class
animateClass 字符串 ‘animated’ animation.css 动画的 class
offset 整数 0 距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效

（3.1）offset为0时，设置动画的元素在出现在浏览器可视区域时执行动

（3.2）完成初始化后，在需要添加动画的元素上，添加上相关动画的类名即可

<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>

vue门户网站，滚动到可视化区域展示动画效果方案

猜你喜欢