【技术】nuxt中引入wow和animate.css随页面滚动出现动画

1. 通过nodejs安装

cnpm install wowjs --save-dev

安装成功后：“package.json

   "wowjs": "^1.1.3"

2.nuxt.config.js中引入

  css:[
    '~/assets/css/animate.css'
  ],

animate.css 官网：https://daneden.github.io/animate.css/

3.在所需要用到动画在的vue文件中引入

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

在mouted函数中：

mounted() {
     if (process.browser) {  // 在页面mounted生命周期里面 根据环境实例化WOW
         new WOW({
             live: false, 
             offset: 0
         }).init()
     } 
 }

温馨提示：live为true时，浏览器调试器会弹出警告

WOW.js cannot detect dom mutations, please call .sync() after loading new content.

参考：https://github.com/matthieua/WOW/issues/166

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

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

5.animatie动画演示（分类很详细，便于选择对应的动画效果）：
http://www.dowebok.com/demo/2014/98/###

6.参考文档：
vue使用WOW.js
Setup wow.js