在vue中使用动画插件

之前项目需求要对文字进行动画展示，所以用到了两个动画的插件，总结一下，方便以后采用，也是借鉴网友的和官网。

第一个是wowjs。

首先安装：npm install wowjs --save-dev

然后进行引用，在main.js中

import wow from 'wowjs'

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

Vue.prototype.$wow = wow

在页面初始化就执行动画，或者在方法执行时

可以在mounted生命周期中或者写方法，在什么时候执行就调用

// wow.js动画的触发
    getwowjs(){
      var wow = new this.$wow.WOW({
          boxClass: 'wow',
          animateClass: 'animated',
          offset: 0,
          mobile: true,
          live: true
        });
        wow.init();
    },

使用方法

<p cdata-wow-duration="2s" data-wow-delay="1s" class="wow lightSpeedIn">这是动画文字</p>

 关于它的配置

在标签中

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

主要的动画样式时在class中设置 wow时必须有的

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

 可以去设置上演示一下，也是很方便的。

第二个是Animate.css

首先还是进行安装 cnpm i animate.css

然后进行引用，还是在main.js中

import animate from 'animate.css'

Vue.use(animate)

使用的方法还是在标签中

<h1 class="animate__animated animate__bounce">这是动画文字</h1>

 通过对class的设置

在特定的情况下进行动画时，就可以使用三元判断

<div :class="addthreeflag && item.flag ? 'animate__animated animate__backInUp' : ' '">
这是动画文字</div>

关于一些动画的样式可以去官网查看，还附带动画的效果

Animate.css | A cross-browser library of CSS animations.

还有一个是让数字进行滚动的插件  vue-count-to

还是安装  npm install vue-count-to

然后再页面中引用  import CountTo from 'vue-count-to'

还要再components中注册一下

1. components: {

2. CountTo

3. },

然后就可以使用了

<countTo :startVal='startnum' :endVal='Projectnum' :duration='1300' suffix='+' :autoplay="true"></countTo>

 其中：startVal是开始的数字。

endVal是结束的数字。

duration是滚动所需要的时长。

suffix数字后面可以添加的符号

autoplay：true/false 是否开始。注意这个如果为true时，需要数字发生变化才会执行