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

Logo

前往低代码交流专区

更多推荐