【技术】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

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值