在Vue中使用wowjs

1、npm安装：npm install wowjs -S

2、main.js中引入animate.css，安装wowjs会自动安装，直接引入

import {WOW} from 'wowjs'
import '../node_modules/wowjs/css/libs/animate.css'
Vue.prototype.$wow=WOW;

3、加上标签使用

<template> 
 <div>
<p style="font-size:30px" class="wow swing" data-wow-duration ="3s" data-wow-delay ="0s">头部</p>
  </div>
</template>
<script>
export default({  
  data(){    
  return {  
    }   
 }, 
 mounted() {  
   // 在项目加载完成之后初始化wow    
    this.$nextTick(() => {      
      new this.$wow().init()   
     })  
  },    
   })
</script>

4、动画的各种属性

wow rollIn

从左到右、顺时针滚动、透明度从100%变化至设定值

wow bounceIn

从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值

wow bounceInUp

从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变

wow bounceInDown

从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变

wow bounceInLeft

从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变

——————

——————

wow bounceInRight

从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变

wow slideInUp

从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）

wow slideInDown

从上往下、上来后固定到设定位置、透明度为设定值不变

wow slideInLeft

从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）

wow slideInRight

从右往左、上来后固定到设定位置、透明度为设定值不变

——————

——————

wow lightSpeedIn

从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值

wow pulse

原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）

wow flipInX

原位置后仰前栽、透明度从100%变化至设定值

wow flipInY

原位置左右旋动、透明度从100%变化至设定值

wow bounce

上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）

——————

——————

wow shake

左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）

wow swing

从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变

wow bounceInU

原位置不变、直接从不显示到显示（无过过渡效果）

wow wobble

原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

配合data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可以完成很多效果，主要还是多实践。