vue插件使用（一）

wowjs 动画

安装：

npm install wowjs --save -dev

main.js中安装animate.css:

import 'wowjs/css/libs/animate.css'

在需要使用的文件中局部引入wowjs，并在mounted实例化wow这个对象:

<script>
  import { WOW } from 'wowjs'
export default {
  name: 'Vue',
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      // 在dom渲染完后,再执行动画
      const wow = new WOW({
        live: false
      })
      wow.init()
    })
  }
}
</script>

在需要使用动画效果的标签中添加wow样式:

<div class="fadeInLeft"></div>

类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。

<div class="wow bounce " data-wow-delay="1.5s" data-wow-iteration："1"></div>

data-wow-duration：更改动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）

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 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

作者：Do_Du
链接：https://www.jianshu.com/p/419041596fe6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

wow.js结合animate.css使用：

安装aninate.css:

npm install animate.css --save

引入：

import animate from 'animate.css'
Vue.use(animate);

直接在需要的地方添加 wow animate__animated 和需要的animate.css的动画类就行了。

vue-countTo 数字累加

安装：

npm install vue-count-to

使用：

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>

<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 100
      }
    }
  }
</script>

Property	Description	type	default
startVal	开始值	Number	0
endVal	结束值	Number	2017
duration	持续时间，以毫秒为单位	Number	3000
autoplay	自动播放	Boolean	true
decimals	要显示的小数位数	Number	0
decimal	十进制分割	String	.
separator	分隔符	String	,
prefix	前缀	String	''
suffix	后缀	String	''
useEasing	使用缓和功能	Boolean	true
easingFn	缓和回调	Function	—

** 注意：当autoplay：true时，它将在startVal或endVal更改时自动启动**

功能

Function Name	Description
mountedCallback	挂载以后返回回调
start	开始计数
pause	暂停计数
reset	重置countTo

粒子效果vue-particles

安装：

npm install vue-particles --save-dev  

main.js里加入以下代码：

import VueParticles from 'vue-particles'  
Vue.use(VueParticles) 

App.vue 文件例子：

注：要让粒子效果实现背景效果，同一级别的元素需要使用position:absoute才能正常使用。

<template>
  <div id="app">
    <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
    <router-view></router-view>
  </div>
</template>

属性：

• color: String类型。默认'#dedede'。粒子颜色。
• particleOpacity: Number类型。默认0.7。粒子透明度。
• particlesNumber: Number类型。默认80。粒子数量。
• shapeType: String类型。默认'circle'。可用的粒子外观类型有："circle","edge","triangle", "polygon","star"。
• particleSize: Number类型。默认80。单个粒子大小。
• linesColor: String类型。默认'#dedede'。线条颜色。
• linesWidth: Number类型。默认1。线条宽度。
• lineLinked: 布尔类型。默认true。连接线是否可用。
• lineOpacity: Number类型。默认0.4。线条透明度。
• linesDistance: Number类型。默认150。线条距离。
• moveSpeed: Number类型。默认3。粒子运动速度。
• hoverEffect: 布尔类型。默认true。是否有hover特效。
• hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
• clickEffect: 布尔类型。默认true。是否有click特效。
• clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"。

作者：Cherry9507
链接：https://www.jianshu.com/p/53199b842d25
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

animejs

安装：

npm install animejs -S

使用：

import anime from 'animejs'

mounted() {
	that.$nextTick(() => {    
	  anime({
		 targets: '.botton-box',
		 translateX: '200px',
		 opacity: [0, 1],
		 easing: 'linear',
		 duration: 300,
		 delay: anime.stagger(10000) // 每个元素的延迟增加100毫秒。
	  })
	})
}