通過(guò) Vue.js 的過(guò)渡系統(tǒng)，你可以輕松的為 DOM 節(jié)點(diǎn)被插入/移除的過(guò)程添加過(guò)渡動(dòng)畫(huà)效果。Vue 將會(huì)在適當(dāng)?shù)臅r(shí)機(jī)添加/移除 CSS 類(lèi)名來(lái)觸發(fā) CSS3 過(guò)渡/動(dòng)畫(huà)效果，你也可以提供相應(yīng)的 JavaScript 鉤子函數(shù)在過(guò)渡過(guò)程中執(zhí)行自定義的 DOM 操作。

以 v-transition="my-transition" 這個(gè)指令為例，當(dāng)帶有這個(gè)指令的 DOM 節(jié)點(diǎn)被插入或移除時(shí)，Vue 將會(huì)：

1. 用 my-transition 這個(gè) ID 去查找是否有注冊(cè)過(guò)的 JavaScript 鉤子對(duì)象。這個(gè)對(duì)象可以是由 Vue.transition(id, hooks) 全局注冊(cè)，或是通過(guò) transitions 選項(xiàng)定義在當(dāng)前的組件內(nèi)部。如果找到此對(duì)象，則會(huì)在過(guò)渡動(dòng)畫(huà)不同的階段調(diào)用相應(yīng)的鉤子。

2. 自動(dòng)探測(cè)目標(biāo)元素是否應(yīng)用了 CSS 過(guò)渡效果或者動(dòng)畫(huà)效果，并在適當(dāng)?shù)臅r(shí)機(jī)添加/移除 CSS 類(lèi)名。

3. 如果沒(méi)有提供 JavaScript 鉤子函數(shù)，也沒(méi)有檢測(cè)到相應(yīng)的 CSS 過(guò)渡/動(dòng)畫(huà)效果，DOM 的插入/移除會(huì)在下一幀立即執(zhí)行。

所有的 Vue.js 過(guò)渡效果只有在該 DOM 操作是通過(guò) Vue.js 觸發(fā)時(shí)才會(huì)生效。觸發(fā)的方式可以是通過(guò)內(nèi)置指令，比如 v-if，或是通過(guò) Vue 實(shí)例的方法，比如 vm.$appendTo()。

CSS 過(guò)渡效果

一個(gè)典型的 CSS 過(guò)渡效果定義如下：

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

你還需要定義 .expand-transition， .expand-enter 和.expand-leave 三個(gè) CSS 類(lèi)：

.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

同時(shí)，你也可以提供 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
  }
})

結(jié)果

http://wiki.jikexueyuan.com/project/vue-js/images/9.png" alt="" />

這里使用的 CSS 類(lèi)名由 v-transition 指令的值所決定。以 v-transition="fade" 為例，CSS 類(lèi) .fade-transition 將會(huì)一直存在，而 .fade-enter 和 .fade-leave 將會(huì)在合適的時(shí)機(jī)自動(dòng)被添加或移除。當(dāng) v-transition 指令沒(méi)有提供值的時(shí)候，所使用的 CSS 類(lèi)名將會(huì)是默認(rèn)的 .v-transition， .v-enter 和 .v-leave。

當(dāng) show 屬性變化時(shí)，Vue 會(huì)依據(jù)其當(dāng)前的值來(lái)插入/移除 <div> 元素，并在合適的時(shí)機(jī)添加/移除對(duì)應(yīng)的 CSS 類(lèi)，具體如下：

• 當(dāng) show 變?yōu)?false 時(shí)，Vue 將會(huì)：

  1. 調(diào)用 beforeLeave 鉤子；
  2. 在元素上應(yīng)用 CSS 類(lèi) .v-leave 來(lái)觸發(fā)過(guò)渡效果；
  3. 調(diào)用 leave 鉤子；
  4. 等待過(guò)渡效果執(zhí)行完畢； (監(jiān)聽(tīng) transitionend 事件)
  5. 從 DOM 中移除元素并且移除 CSS 類(lèi) .v-leave。
  6. 調(diào)用 afterLeave 鉤子。

• 當(dāng) show 為 true 時(shí)，Vue 將會(huì)：

  1. 調(diào)用 beforeEnter 鉤子；
  2. 在元素上應(yīng)用 CSS 類(lèi) .v-enter；
  3. 將元素插入 DOM；
  4. 調(diào)用 enter 鉤子；
  5. 應(yīng)用 .v-enter 類(lèi), 然后強(qiáng)制 CSS 布局以保證 .v-enter 生效；最后移除 .v-enter 來(lái)觸發(fā)元素過(guò)渡到原本的狀態(tài)。
  6. 等待過(guò)渡效果執(zhí)行完畢；
  7. 調(diào)用 afterEnter 鉤子。

此外，如果一個(gè)正在執(zhí)行進(jìn)入的過(guò)渡效果的元素在過(guò)渡還未完成之前就被移除，則 enterCancelled 鉤子將會(huì)被執(zhí)行。這個(gè)鉤子可以用于清理工作，比如移除在 enter 時(shí)創(chuàng)建的計(jì)時(shí)器。對(duì)于正在離開(kāi)過(guò)渡中又被重新插入的元素同理。

上述所有的鉤子函數(shù)執(zhí)行時(shí)，其 this 都指向相應(yīng)的 Vue 實(shí)例。如果一個(gè)元素本身是一個(gè) Vue 實(shí)例的根節(jié)點(diǎn)，則此實(shí)例將被應(yīng)用為 this；否則 this 指向該過(guò)渡指令所屬的實(shí)例。

最后，enter 與 leave 鉤子函數(shù)可以接受可選的第二個(gè)參數(shù)：一個(gè)回調(diào)函數(shù)。當(dāng)你的函數(shù)簽名中含有第二個(gè)參數(shù)時(shí)，即表示你期望使用此回調(diào)來(lái)顯式地完成整個(gè)過(guò)渡過(guò)程，而不是依賴(lài) Vue 去自動(dòng)檢測(cè) CSS 過(guò)渡的 transitionend 事件。比如：

enter: function (el) {
  // 無(wú)第二個(gè)參數(shù)
  // 過(guò)渡效果的結(jié)束由 CSS 過(guò)渡結(jié)束事件來(lái)決定
}

VS

enter: function (el, done) {
  // 有第二個(gè)參數(shù)
  // 過(guò)渡效果結(jié)束必須由手動(dòng)調(diào)用 `done` 來(lái)決定
}

當(dāng)多個(gè)元素同時(shí)執(zhí)行過(guò)渡效果時(shí)，Vue.js 會(huì)進(jìn)行批量處理以保證只觸發(fā)一次強(qiáng)制布局。

CSS 動(dòng)畫(huà)

CSS 動(dòng)畫(huà)通過(guò)與 CSS 過(guò)渡效果一樣的方式進(jìn)行調(diào)用，區(qū)別就是動(dòng)畫(huà)中 .v-enter 類(lèi)并不會(huì)在節(jié)點(diǎn)插入 DOM 后馬上移除，而是在 animationend 事件觸發(fā)時(shí)移除。

示例： (省略了兼容性前綴)

<span v-show="show" v-transition="bounce">Look at me!</span>

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

結(jié)果

http://wiki.jikexueyuan.com/project/vue-js/images/10.png" alt="" />

純 JavaScript 過(guò)渡效果

你也可以只使用 JavaScript 鉤子，不定義任何 CSS 過(guò)渡規(guī)則。當(dāng)只使用 JavaScript 鉤子時(shí)，enter 和 leave 鉤子必須使用 done 回調(diào)，否則它們將會(huì)被同步調(diào)用，過(guò)渡將立即結(jié)束。下面的示例中我們使用 jQuery 來(lái)注冊(cè)一個(gè)自定義的 JavaScript 過(guò)渡效果：

Vue.transition('fade', {
  enter: function (el, done) {
    // 此時(shí)元素已被插入 DOM
    // 動(dòng)畫(huà)完成時(shí)調(diào)用 done 回調(diào)
    $(el)
      .css('opacity', 0)
      .animate({ opacity: 1 }, 1000, done)
  },
  enterCancelled: function (el) {
    $(el).stop()
  },
  leave: function (el, done) {
    // 與 enter 鉤子同理
    $(el).animate({ opacity: 0 }, 1000, done)
  },
  leaveCancelled: function (el) {
    $(el).stop()
  }
})

定義此過(guò)渡之后，你就可以通過(guò)給 v-transition 指定對(duì)應(yīng)的 ID 來(lái)調(diào)用它：

<p v-transition="fade"></p>

如果一個(gè)只使用 JavaScript 過(guò)渡效果的元素恰巧也受到其它 CSS 過(guò)渡/動(dòng)畫(huà)規(guī)則的影響，這可能會(huì)對(duì) Vue 的 CSS 過(guò)渡檢測(cè)機(jī)制產(chǎn)生干擾。碰到這樣的狀況時(shí)，你可以通過(guò)給你的鉤子對(duì)象添加 css: false 來(lái)禁止 CSS 檢測(cè)。

漸進(jìn)過(guò)渡效果

當(dāng)同時(shí)使用 v-transition 和 v-repeat 時(shí)，我們可以為列表元素添加漸進(jìn)的過(guò)渡效果，你只需要為你的過(guò)渡元素加上 stagger， enter-stagger 或者 leave-stagger 特性（以毫秒為單位）：

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

或者你也可以提供 stagger， enterStagger 或 eaveStagger 鉤子來(lái)進(jìn)行更細(xì)粒度的控制：

Vue.transition('stagger', {
  stagger: function (index) {
    // 為每個(gè)過(guò)渡元素增加 50ms 的延遲,
    // 但是最大延遲為 300ms
    return Math.min(300, index * 50)
  }
})

示例：

http://wiki.jikexueyuan.com/project/vue-js/images/11.png" alt="" />

下一節(jié)：創(chuàng)建大型應(yīng)用。