1 過渡基礎

1.1 過渡的方式

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。 包括以下工具：

• 在 CSS 過渡和動畫中自動應用 class
• 可以配合使用第三方 CSS 動畫庫，如 Animate.css
• 在過渡鉤子函數中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js

1.2 過渡的情形

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

1.3 基本過渡實例

<template>
    <div id="demo">
          <button v-on:click="show = !show">
            Toggle
          </button>
          <transition name="fade">
            <p v-if="show">hello</p>
          </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show: true
            }
        }
    }
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
         transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
          opacity: 0;
    }
</script>

2. CSS 實現過渡效果

2.1 過渡的類名

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

對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的 <transition>，則 v- 是這些類名的默認前綴。如果你使用了 <transition name="my-transition">，那么 v-enter 會替換為 my-transition-enter

2.2 CSS transition

/* 可以設置不同的進入和離開動畫 */
/* 設置持續時間和動畫函數 */
.v-enter-active {
  transition: all .3s ease;
}
.v-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.v-enter, .v-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

2.3 CSS animation

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

2.4 自定義過渡的類名 和 第三方 CSS動畫庫

我們可以在<transtion>組件上通過以下屬性來自定義過渡類名：

• enter-class
• enter-active-class
• enter-to-class(2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

他們的優先級高于普通的類名，這對于 Vue 的過渡系統和其他第三方 CSS 動畫庫，如 Animate.css結合使用十分有用。

<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
>
    <p v-if="show">hello</p>
</transition>

2.6 設置過渡持續時間

在很多情況下，Vue 可以自動得出過渡效果的完成時機。默認情況下，Vue 會等待其在過渡效果的根元素的第一個 transitionend 或 animationend 事件。然而也可以不這樣設定——比如，我們可以擁有一個精心編排的一系列過渡效果，其中一些嵌套的內部元素相比于過渡效果的根元素有延遲的或更長的過渡效果。

在這種情況下你可以用 <transition> 組件上的 duration 屬性定制一個顯性的過渡持續時間 (以毫秒計)：

<transition :duration="1000">...</transition>

定制進入和移出的持續時間：

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

3 JavaScript 實現過渡效果

3.1 JavaScript 鉤子

<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"
>
  <!-- ... -->
</transition>

// ...
methods: {
  // --------
  // 進入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 此回調函數是可選項的設置
  // 與 CSS 結合時使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

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

  beforeLeave: function (el) {
    // ...
  },
  // 此回調函數是可選項的設置
  // 與 CSS 結合時使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

JavaScript 鉤子 適合 JavaScript過渡

當只用 JavaScript 過渡的時候， 在 enter 和 leave 中，回調函數 done 是必須的 。否則，它們會被同步調用，過渡會立即完成。

推薦對于僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。

3.2 第三方 JavaScript 動畫庫

使用 Velocity.js 的案例

 <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>

 methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }