vue-06-過分和動畫

1, css過分與動畫

須要使用 v-if, v-show 來進行

1), 過分類名

v-enter: 進入時觸發

v-enter-active: 執行過程當中

v-enter-to: 中止時進行

v-leave: 離開時開始時進行的

v-leave:active: 離開執行時

v-leave-to: 離開中止時

<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
      },

須要添加css樣式

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

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

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

 

2), css動畫

 <!--動畫-->
    <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);*/
    /*}*/
  /*}*/

3, 使用第三方動畫庫

引入第三方css

在index.html中引入

<!--引入第三方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
      }