技術標籤：VUEvue.js

一、過度

vue提供了 transition的封裝元件

所有關於過度的動畫都是通過transition元件設定的

幾種能夠能夠過度的場景

• 條件渲染 (使用v-if)
• 條件展示 (使用v-show)
• 動態元件
• 元件根節點

基本使用

<div>
      <button @click="show">顯示隱藏</button>
      <transition>
        <div class="box" v-if="isShow"></div>
      </transition>
  </div>
 

transition元件巢狀一個div,這個標籤通過設定css樣式進行過度顯示

過度效果

.v-enter-active, .v-leave-active {
  transition: opacity .5s;
}
.v-enter, .v-leave-to /* .v-leave-active below version 2.1.8 */ {
  opacity: 0;
}

以上屬性不是自定義的而是vue提供給我們設定 transition 元件用的

Vue 的transition元件實現過渡的機理

Vue 的transition元件會自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機新增/刪除 CSS 類名

官網提供了一些class類名

• v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
• v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函式。
• v-enter-to：2.1.8 版及以上定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。
• v-leave：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
• v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。
• v-leave-to：2.1.8 版及以上定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除

如果transition元件中有name屬性，name屬性的值 設定對應的css 屬性的時候要將v-替換為設定的對應屬性加-比如設定一個 fade的name屬性

<template>
  <div>
      <button @click="show">顯示隱藏</button>
      <transition name="fade">
        <div class="box" v-if="isShow"></div>
      </transition>
  </div>
</template>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .v-leave-active below version 2.1.8 */ {
  opacity: 0;
}

例：利用過度實現一個簡單動畫效果

<template>
  <div>
      <button @click="show">顯示隱藏</button>
      <transition name="slide-fade">
        <div class="box" v-if="isShow"></div>
      </transition>
  </div>
</template>

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

二、動畫

動畫和過度使用方法類似，區別在於css動畫用法同css 過度 在動畫中 v-enter類名在節點插入DOM後不會立即刪除，而是在animationend 事件觸發時刪除

基本使用

<template>
  <div>
      <button @click="show">顯示隱藏</button>
      <transition name="bounce">
        <div class="box" v-if="isShow"></div>
      </transition>
  </div>
</template>

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

利用第三方庫加類名進行vue動畫的開發

• enter-class
• enter-active-class
• enter-to-class
• leave-class
• leave-active-class
• leave-to-class

例：使用animate 第三方庫輔助開發

在元件中引入css庫

<style scoped>
@import "./css/animate.css";
.box{
  width: 300px;
  height: 300px;
  background: skyblue;
  margin-top: 15px;
}
</style>

在transition元件中使用類名屬性新增對應庫的類名

<template>
  <div>
      <button @click="show">顯示隱藏</button>
      <transition
          name="custom-classes-transition"
          enter-active-class="animated tada"
          leave-active-class="animated bounceOutRight" >
        <div class="box" v-if="isShow"></div>
      </transition>
  </div>
</template>

在類名屬性中新增對應的類名，第一個animated屬性，就是程式碼讓該元素/元件具有動畫狀態，第二個屬性就是運動的狀態

如果同時設定了過度和動畫，此時可以設定type屬性進行區分監聽

• type 為transition則代表監聽過渡的
• type為 animation則代表監聽動畫的

參考連結：Animate.css動畫演示

動畫可以定製進入和移出的持續時間

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript 鉤子

使用方法

<template>
  <div>
      <button @click="show">顯示隱藏</button>
      <transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter"
            v-on:enter-cancelled="enterCancelled"

            v-on:before-leave="beforeLeave"
            v-on:leave="leave"
            v-on:after-leave="afterLeave"
            v-on:leave-cancelled="leaveCancelled"
            >
          <div class="box" v-if="isShow"></div>
      </transition>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        isShow:true
      }
    },
  methods: {
      show(){
        this.isShow = !this.isShow
      },
      // --------
      // 進入中
      // --------

      beforeEnter: function (el) {
        console.log(el)
        // ...
      },
      // 當與 CSS 結合使用時
      // 回撥函式 done 是可選的
      enter: function (el, done) {
         console.log(el)
        // ...
        done()
      },
      afterEnter: function (el) {
         console.log(el)
        // ...
      },
      enterCancelled: function (el) {
         console.log(el)
        // ...
      },

      // --------
      // 離開時
      // --------

      beforeLeave: function (el) {
         console.log(el)
        // ...
      },
      // 當與 CSS 結合使用時
      // 回撥函式 done 是可選的
      leave: function (el, done) {
         console.log(el)
        // ...
        done()
      },
      afterLeave: function (el) {
         console.log(el)
        // ...
      },
      // leaveCancelled 只用於 v-show 中
      leaveCancelled: function (el) {
         console.log(el)
        // ...
      }
    }
  }
</script>

在使用函式鉤子設定動畫或者過渡的時候當只用 ，在 enter 和 leave 中必須使用 done 進行回撥。否則，它們將被同步呼叫，過渡會立即完成。

el是設定的節點名稱，done當前函式的回撥