vue-06-过度和动画

<div>
      <p>动画过度</p><br/>
      <button @click="showHide"> 按钮</button>

      <transition name="fade">
        <p v-show="show"> 带动画的过度被隐藏的区域</p>
      </transition>

      <p v-show="show"> 不带动画的过度被隐藏的区域</p>
    </div>

data() {
      return {
        show: true,
        showAdm: true,
        anim: true,
      }
    },
    methods: {
      showHide() {
        this.show = !this.show
      },

 .fade-enter-active, .fade-leave-active{
    transition: opacity 2s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0
  }

  .fade-enter-to, .fade-leave {
    opacity: 1;
  }

 <!--动画-->
    <div>
      <button @click="showHideAdm"> 动画切换</button>
      <transition name="ami">
        <p v-show="showAdm"> 嘿嘿 </p>
      </transition>
    </div>

 showHideAdm() {
        this.showAdm = !this.showAdm
      },

  /*动画*/
  .ami-enter-active {
    animation: bounce-in .5s ease;
  }
  /*使用in的反转动画*/
  .ami-leave-active {
    animation: bounce-in .5s reverse;
  }
  /*进入动画*/
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
  /*!*离开动画*!*/
  /*@keyframes bounce-out {*/
    /*0% {*/
      /*transform: scale(0);*/
    /*}*/
    /*50% {*/
      /*transform: scale(1.5);*/
    /*}*/
    /*100% {*/
      /*transform: scale(1);*/
    /*}*/
  /*}*/

<!--引入第三方css-->
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

 <!--使用第三方库， 将css在index中引入-->
    <div>
      <button @click="animLib">动画库</button>
      <transition
        name="custom-classes-transition"
        enter-active-class="animated flipInX"
        leave-active-class="animated flipOutX">
        <p v-if="anim">第三方动画库使用 </p>
      </transition>
    </div>

animLib() {
        this.anim = !this.anim
      }