Vue脚手架实现页面滚动动画

这里使用两个插件

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

animate.css是动画库有很多种动画供我们挑选

1.首先安装wow.js

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  需要执行动画的元素的 class
  animateClass: 'animated', // default  animation.css 动画的 class
  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() + ">")
  }
})

3.使用

在需要添加滚动动画的 .vue文件中，先初始化wow

  mounted() {
    this.$nextTick(()=>{
            this.$wow.init()
      })
    },

在需要添加动画的元素上，添加上相关动画的类名即可

// <!-- wow 为配置中的动画类名，必要！ -->
// <!-- 配置每一个动画名格式 wow animate__animated 动画名 -->
// <!-- data-wow-delay 自定义动画延迟时间 -->
// <!-- data-wow-duration 自定义动画持续时间 -->

<div class="wow animate__animated animate__fadeIn">动画效果</div>

完成后的展示：

页面滚动动画演示