為了應(yīng)用過渡效果，需要在目標(biāo)元素上使用 transition 特性：

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

transition 特性可以與下面資源一起用：

v-if
v-show
v-for （只在插入和刪除時(shí)觸發(fā)，使用 vue-animated-list 插件）
動(dòng)態(tài)組件
在組件的根節(jié)點(diǎn)上，并且被 Vue 實(shí)例 DOM 方法（如 vm.$appendTo(el)）觸發(fā)。

當(dāng)插入或刪除帶有過渡的元素時(shí)，Vue 將：

嘗試以 ID "my-transition" 查找 JavaScript 過渡鉤子對象——通過 Vue.transition(id, hooks) 或 transitions 選項(xiàng)注冊。如果找到了，將在過渡的不同階段調(diào)用相應(yīng)的鉤子。
自動(dòng)嗅探目標(biāo)元素是否有 CSS 過渡或動(dòng)畫，并在合適時(shí)添加/刪除 CSS 類名。
如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動(dòng)畫，DOM 操作（插入/刪除）在下一幀中立即執(zhí)行。

CSS 過渡

示例

典型的 CSS 過渡像這樣：

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

然后為 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 規(guī)則:

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

你可以在同一元素上通過動(dòng)態(tài)綁定實(shí)現(xiàn)不同的過渡：

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

new Vue({ el: '...', data: { show: false, transitionName: 'fade' }})

另外，可以提供 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 }})

過渡的 CSS 類名

類名的添加和切換取決于 transition 特性的值。比如 transition="fade"，會(huì)有三個(gè) CSS 類名：

.fade-transition 始終保留在元素上。
.fade-enter 定義進(jìn)入過渡的開始狀態(tài)。只應(yīng)用一幀然后立即刪除。
.fade-leave 定義離開過渡的結(jié)束狀態(tài)。在離開過渡開始時(shí)生效，在它結(jié)束后刪除。
如果 transition 特性沒有值，類名默認(rèn)是 .v-transition, .v-enter 和 .v-leave。

自定義過渡類名

我們可以在過渡的 JavaScript 定義中聲明自定義的 CSS 過渡類名。這些自定義類名會(huì)覆蓋默認(rèn)的類名。當(dāng)需要和第三方的 CSS 動(dòng)畫庫，比如 Animate.css 配合時(shí)會(huì)非常有用：