vue加animation.css动画

1. npm装一个animation.css插件

   npm install animate.css --save
   

2. 在main.js中加上css的引用

   import 'animate.css'
   

3. 在想要加动画的元素上加上类，animate__animated 是基础类必须加，后面的是动画样式类，可以选择很多，具体参考animation.css官网

   <h1 class="animate__animated animate__bounce">An animated element</h1>
   

4. 如果你想要鼠标放上去才有动画，你可以动态的添加类名

   <h1 :class="['refactor','animate__animated', {'animate__bounce':mouseEnterIf}]" @mouseenter="mouseEnterEv()" @mouseleave="mouseLeaveEv()">An animated element</h1>
   
   	mouseEnterEv(){
           this.mouseEnterIf = true;
       },
       mouseLeaveEv(){
           this.mouseEnterIf = false;
       },
   

5. 如果你想要循环播放，或者设置播放的时长等，可以对该元素设置animation参数

   .refactor {
       animation-iteration-count: infinite;
   }
   
   animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
   animation-timing-function	规定动画的速度曲线。
   animation-delay	规定在动画开始之前的延迟。
   animation-iteration-count	规定动画应该播放的次数。
   animation-direction	规定是否应该轮流反向播放动画。