使用wowjs实现在可视区内动画效果

一、VUE项目使用wowjs

1-引入下载好的animate.css

2-引入下载好的wow.js/使用npm 下载

        使用npm下载

        npm i wowjs --save-dev

        Import {WOW} from ‘wowjs’

3-在mounted里初始化wow

• mounted( ){
  •    
  •   new WOW({   live:true,
  • })
  • }.init( )

4-在页面中使用

• Class=“wow rollIn”
  • data-wow-duration=’0.15s’
  • data-wow-iteration=’5’

二、NUXT项目使用wowjs

1. 通过nodejs安装：npm install wowjs --save-dev
2. 安装成功后在’package.json’可以查找到wowjs
3. nuxt.config.js中引入animate.css
4. 在需要用到动画的vue文件中引入wowjs
   •     <script>
   •       if (process.browser) { // 在这里根据环境引入wow.js
   •           var {WOW} = require('wowjs')
   •       }
   •     </script>
5. 在需要动画的vue文件中的mouted函数中：
   •     mounted() {
   •          if (process.browser) {  // 在页面mounted生命周期里面 根据环境实例化WOW
   •              new WOW({
   •                  live: false,
   •                  offset: 0
   •              }).init()
   •          }
   •      }
6. 在Html中使用：wow + 对应的animate.css的类名就可以了，会随着屏幕滚动加载动画

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

wowjs项目地址：https://wowjs.uk/