nuxt vue 使用wow.js实现页面滚动动画

通过nodejs安装：npm install wowjs --save-dev

安装成功后在’package.json’可以查找到wowjs

nuxt.config.js中引入animate.css

在需要用到动画的vue文件中引入wowjs

<script>
     if (process.browser) { // 在这里根据环境引入wow.js
         var {WOW} = require('wowjs')
     }
</script>

在需要动画的vue文件中的mouted函数中：

     // 动画效果
     mounted() {
     if (process.browser) {  // 在页面mounted生命周期里面 根据环境实例化WOW
         new WOW({
              boxClass: 'wow', // 需要执行动画的元素的 class
              animateClass: 'animated', // animation.css 动画的 class
              offset: 60, // 距离可视区域多少开始执行动画
              mobile: true, // 是否在移动设备上执行动画
              live: true // 异步加载的内容是否有效
         }).init()
     }
 }

在Html中使用：
用 wow + 对应的animatie.css的类名就可以了，会随着屏幕滚动加载动画

<div class="wow bounceInDown">hello</div>

wow提供的动画效果

1. fade-in：淡入效果
2. slide-in：从一侧滑入效果
3. bounce-in：弹跳进入效果
4. flip-in：翻转进入效果
5. rotate-in：旋转进入效果
6. zoom-in：缩放进入效果
7. roll-in：滚动进入效果
8. fadeInUp：向上淡入效果
9. fadeInDown：向下淡入效果
10. fadeInLeft：向左淡入效果
11. fadeInRight：向右淡入效果
12. zoomInUp：向上缩放进入效果
13. zoomInDown：向下缩放进入效果
14. zoomInLeft：向左缩放进入效果
15. zoomInRight：向右缩放进入效果