關(guān)于如何學(xué)習(xí)Vue，Vue的締造者尤雨溪前輩曾經(jīng)在知乎發(fā)表過一篇新手向：Vue 2.0 的建議學(xué)習(xí)順序。
關(guān)于Vue其他知識(shí)介紹：
篇幅一
篇幅二
篇幅四
6. 過渡 & 動(dòng)畫
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果。
包括以下工具：
- 在 CSS 過渡和動(dòng)畫中自動(dòng)應(yīng)用 class
- 可以配合使用第三方 CSS 動(dòng)畫庫(kù)，如 Animate.css
- 在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 動(dòng)畫庫(kù)，如 Velocity.js
6.1 單元素/組件過渡
Vue 提供了transition的封裝組件。
CSS過渡：
在進(jìn)入/離開的過渡中，會(huì)有 6 個(gè) class 切換。
v-enter：定義進(jìn)入過渡的開始狀態(tài)。在元素被插入時(shí)生效，在下一個(gè)幀移除。
v-enter-active：定義過渡的狀態(tài)。在元素整個(gè)過渡過程中作用，在元素被插入時(shí)生效，在 transition/animation 完成之后移除。這個(gè)類可以被用來(lái)定義過渡的過程時(shí)間，延遲和曲線函數(shù)。
v-enter-to: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入一幀后生效 (于此同時(shí) v-enter 被刪除)，在 transition/animation 完成之后移除。
v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)生效，在下一個(gè)幀移除。
v-leave-active：定義過渡的狀態(tài)。在元素整個(gè)過渡過程中作用，在離開過渡被觸發(fā)后立即生效，在 transition/animation 完成之后移除。這個(gè)類可以被用來(lái)定義過渡的過程時(shí)間，延遲和曲線函數(shù)。
v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)一幀后生效 (于此同時(shí) v-leave 被刪除)，在 transition/animation 完成之后移除
v-是這些類的前綴，為transition添加name屬性可以重置前綴。
CSS動(dòng)畫：
CSS動(dòng)畫用法同CSS過渡類似，區(qū)別是在在動(dòng)畫中v-enter類型在節(jié)點(diǎn)插入后DOM后不會(huì)立即刪除，而是在animationend事件觸發(fā)時(shí)刪除。
6.2 自定義過渡的類名
我們可以通過一下特性來(lái)定義過渡類名： enter-classenter-active-class-
enter-to-class(2.1.8+) leave-classleave-active-class-
leave-to-class(2.1.8+)
他們的優(yōu)先級(jí)高于普通的類名，這對(duì)于 Vue 的過渡系統(tǒng)和其他第三方 CSS 動(dòng)畫庫(kù)，如 Animate.css 結(jié)合使用十分有用。
示例：
<link rel="stylesheet" type="text/css">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
6.3 顯性的過渡持續(xù)時(shí)間
<transition>組件上的duration屬性定制一個(gè)顯性的過渡持續(xù)時(shí)間：
<transition :duration="1000"> </transition>
<transition :duration="{ enter:500,leave:800}"></transition>
6.4 JavaScript鉤子
可以在屬性中聲明 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: {
// --------
// 進(jìn)入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
// 與 CSS 結(jié)合時(shí)使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 離開時(shí)
// --------
beforeLeave: function (el) {
// ...
},
// 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
// 與 CSS 結(jié)合時(shí)使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
注意：
當(dāng)只用 JavaScript 過渡的時(shí)候， 在enter和leave 中，回調(diào)函數(shù) done 是必須的 。否則，它們會(huì)被同步調(diào)用，過渡會(huì)立即完成。
推薦對(duì)于僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會(huì)跳過 CSS 的檢測(cè)。這也可以避免過渡過程中 CSS 的影響。
6.4 初始渲染的過渡
可以通過appear特性設(shè)置節(jié)點(diǎn)的在出事渲染的過渡
<transition appear></transition>
這里默認(rèn)和進(jìn)入和離開過渡一樣，同樣也可以自定義CSS類名。
<transition
appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class" (2.1.8+)
appear-active-class="custom-appear-active-class"
>
<!-- ... -->
</transition>
自定義 JavaScript 鉤子：
<transition
appear
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
v-on:appear-cancelled="customAppearCancelledHook"
>
<!-- ... -->
</transition>
6.5 多個(gè)元素的過渡
注意：當(dāng)有相同標(biāo)簽名的元素切換時(shí)，需要通過 key 特性設(shè)置唯一的值來(lái)標(biāo)記以讓 Vue 區(qū)分它們，否則 Vue 為了效率只會(huì)替換相同標(biāo)簽內(nèi)部的內(nèi)容。即使在技術(shù)上沒有必要，給在 <transition> 組件中的多個(gè)元素設(shè)置 key 是一個(gè)更好的實(shí)踐。
6.6 過渡模式
Vue提供了過渡模式：
- in-out：新元素先進(jìn)行過渡，完成之后當(dāng)前元素過渡離開。
- out-in：當(dāng)前元素先進(jìn)行過渡，完成之后新元素過渡進(jìn)入。
