Vue_使用animate.css库

一.@keyframs 动画
我们如何在Vue中使用@keyframs 动画？

<transition name='fa'>
    <div v-if="cssanimate">hello css animate1</div>
</transition>
    <button @click='cssclick'>css动画</button>

在css中：

<style>
@keyframes bounce-in{
      0%{
          transform: scale(0);
      }
      50%{
         transform: scale(1.5);
      }
      100%{
         transform: scale(1);
      }
   }
   .fa-enter-active{
       animation:bounce-in 1s;
   }
    .fa-leave-active{
       animation:bounce-in 1s reverse;
    }
</style>

就可以实现点击放大缩小的效果。
二.自定义类
在Vue中必须用Vue给我们设定的类名来实现动画效果么？
不必，可以自己定义。例如 fa-leave-active 我们想要用active来代替

<transition name='fa'
        enter-active-class='active' 
        leave-active-class='leave'>
 <div v-if="cssanimate">hello css animate</div>
 </transition>
 <button @click='cssclick'>css动画</button>

在CSS中：

.active{
       animation:bounce-in 1s;
 }
.leave{
       animation:bounce-in 1s reverse;
 }

可以实现相同的效果

三.使用animate.css库
既然我们可以自己定义class的名字，那我们就可以在Vue中引用animate.css库啦

首先css的引入，记得在css的后缀名不能省略

 import animated from './css/animate.css'

在使用animate.css库的时候，名字开头要为animated，后面跟animate动画库的动画名称。

 <transition name='fade'
         enter-active-class='animated swing' 
         leave-active-class='animated flash' >
  <div v-if="cssanimate">hello css animate</div>
</transition>
  <button @click='cssclick'>css动画</button>

如此就可以实现动画效果了，引用第三方库就不需要我们手动编写css动画效果了。

使用第三方库注意点：

①.要用enter-active-class命名方式来使用动画库

②.要在命名加上animated

Vue_使用animate.css库

猜你喜欢