簡介

通過 Vue.js 的過渡系統，你可以輕松的為 DOM 節點被插入/移除的過程添加過渡動畫效果。Vue 將會在適當的時機添加/移除 CSS 類名來觸發 CSS3 過渡/動畫效果，你也可以提供相應的 JavaScript 鉤子函數在過渡過程中執行自定義的 DOM 操作。

　　以 v-transition="my-transition 這個指令為例，當帶有這個指令的 DOM 節點被插入或移除時，Vue 將會：

　　1.用 my-transition這個 ID 去查找是否有註冊過的 JavaScript 鉤子對象。這個對象可以是由 Vue.transition(id, hooks) 全局註冊，或是通過 transitions

　　2.自動探測目標元素是否應用了 CSS 過渡效果或者動畫效果，並在適當的時機添加/移除 CSS 類名。

　　3.如果沒有提供 JavaScript 鉤子函數，也沒有檢測到相應的 CSS 過渡/動畫效果，DOM 的插入/移除會在下一幀立即執行。

<div v-if="show" transition="my-transition"></div>

所有的 Vue.js 過渡效果只有在該 DOM 操作是通過 Vue.js 觸發時才會生效。觸發的方式可以是通過內置指令，比如 v-if

CSS 過渡

一個典型的 CSS 過渡效果定義如下：

<div v-if="show" v-transition="expand">hello</div>

然後為.expand-transition，.expand-enter 和.expand-leave 添加 CSS 規則:

/* 必需 */
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background
 
-color: #eee;
  overflow: hidden;
}
/* .expand-enter 定義進入的開始狀態 */
/* .expand-leave 定義離開的結束狀態 */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

另外，可以提供 JavaScript 鉤子:

Vue.transition(‘expand‘, {
  beforeEnter: function (el) {
    el.textContent = ‘beforeEnter‘
  },
  enter: function (el) {
    el.textContent = ‘enter‘
  },
  afterEnter: function (el) {
    el.textContent = ‘afterEnter‘
  },
  enterCancelled: function (el) {
    // handle cancellation
  },
  beforeLeave: function (el) {
    el.textContent = ‘beforeLeave‘
  },
  leave: function (el) {
    el.textContent = ‘leave‘
  },
  afterLeave: function (el) {
    el.textContent = ‘afterLeave‘
  },
  leaveCancelled: function (el) {
    // handle cancellation
  }
})

說簡單點就是我們在操作某個元素時，當v-if的值為發生變化時，就會引起transition的變化，從而使的CSS樣式改變。

過渡的CSS類名

類名的添加和切換取決於 transition特性的值。比如 transition="fade"，會有三個 CSS 類名：

　　1）.fade-transition 始終保留在元素上。

　　2）.fade-enter 定義進入過渡的開始狀態。只應用一幀然後立即刪除。

　　3）.fade-leave 定義離開過渡的結束狀態。在離開過渡開始時生效，在它結束後刪除。

　　如果 transition 特性沒有值，類名默認是 .v-transition, .v-enter 和 .v-leave。

過渡流程詳解

根據我們第一節中的代碼來講解過渡流程：

　　當 show 屬性改變時，Vue.js 將相應地插入或刪除div元素，按照如下規則改變過渡的 CSS 類名：

　　如果 show 變為 false，Vue.js 將：

1. 用 beforeLeave 鉤子；
2. 添加 v-leave 類名到元素上以觸發過渡；
3. 調用 leave 鉤子；
4. 等待過渡結束（監聽 transitionend 事件）；
5. 從 DOM 中刪除元素並刪除 v-leave 類名；
6. 調用 afterLeave 鉤子。

　　如果 show 變為 true，Vue.js 將：

1. 調用 beforeEnter 鉤子；
2. 添加 v-enter 類名到元素上；
3. 把它插入 DOM；
4. 調用 enter 鉤子；
5. 強制一次CSS 布局，讓 v-enter 確實生效。然後刪除 v-enter 類名，以觸發過渡，回到元素的原始狀態；
6. 等待過渡結束；
7. 調用afterEnter鉤子。

漸近過渡

transition 與 v-for 一起用時可以創建漸近過渡。給過渡元素添加一個特性 stagger, enter-stagger 或 leave-stagger， 如下代碼：

<div v-for="list" transition stagger="100"></div>

或者，提供一個鉤子 stagger, enter-stagger 或 leave-stagger，以更好的控制. 如下代碼：

Vue.transition(‘stagger‘, {
  stagger: function (index) {
    // 每個過渡項目增加 50ms 延時
    // 但是最大延時限制為 300ms
    return Math.min(300, index * 50)
  }
})

如下實例html代碼：

<div id="demo">
    <input v-model="query">
    <ul>
        <li v-for="item in list | filterBy query"
            transition="staggered"
            stagger="100">
          {{item.msg}}
         </li>
    </ul>
</div>

js代碼：

 new Vue({
    el: ‘#demo‘,
    data: {
        query: ‘‘,
        list: [
            { msg: ‘Bruce Lee‘ },
            { msg: ‘Jackie Chan‘ },
            { msg: ‘Chuck Norris‘ },
            { msg: ‘Jet Li‘ },
            { msg: ‘Kung Fury‘ }
        ]
    }
})

CSS代碼：

ul {
    padding-left: 0;
    font-family: Helvetica, Arial, sans-serif;
}
.staggered-transition {
    transition: all .5s ease;
    overflow: hidden;
    margin: 0;
    height: 20px;
}
.staggered-enter, .staggered-leave {
    opacity: 0;
    height: 0;
}

以上代碼的效果為:當我們在文本框中輸入值時，會看到列表逐漸消失，刪除內容時，會看到列表顯示。

Vue深度學習（5）-過渡效果