vue点击切换类名_（Vue动效）2.Vue中使用Animate.css库

关键词：<transition> 、@keyframes、Animate.css库、自定义添加class名

一、定义CSS3属性中 @keyframs 中的动效 bounce-in

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

<div id="root">
   <transition name="fade">
    <div v-if="show">hello miya</div>
   </transition>
  <button @click="ha