Vue內(nèi)置組件<transition>可以給任何元素，組件添加過渡，用<transition name='xxx'[可選]>包裹元素、組件。
當(dāng)插入或刪除包含在 transition 組件中的元素時，Vue 將會做以下處理：
1. 自動嗅探目標(biāo)元素是否應(yīng)用了 CSS 過渡或動畫，如果是，在恰當(dāng)?shù)臅r機(jī)添加/刪除 CSS 類名。
2. 如果過渡組件提供了 JavaScript 鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r機(jī)被調(diào)用。
3. 如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作 (插入/刪除) 在下一幀中立即執(zhí)行。
過渡類名：
ps:假如使用一個沒有名字的 <transition>，則 v- 是這些類名的默認(rèn)前綴。如果你使用了 <transition name="my-transition">，那么 v-enter 會替換為 my-transition-enter。
CSS過渡
/* CSS文件 可以設(shè)置不同的進(jìn)入和離開動畫 */
/* 設(shè)置持續(xù)時間和動畫函數(shù) */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
CSS 動畫
CSS 動畫用法同 CSS 過渡，區(qū)別是在動畫中 v-enter 類名在節(jié)點插入 DOM 后不會立即刪除，而是在 animationend 事件觸發(fā)時刪除。
過渡模式
<transition>默認(rèn)行為是 進(jìn)入和離開 同時發(fā)生，在一些場景會不適用，因此提供了 過渡模式。
```
in-out：新元素先進(jìn)行過渡，完成之后當(dāng)前元素過渡離開。
out-in：當(dāng)前元素先進(jìn)行過渡，完成之后新元素過渡進(jìn)入。
方法：<transition mode="in-out">
**列表過渡 <transition-group>**
1. 過渡同時渲染在整個列表上，過渡模式不可用
2.<transition-group> 組件還有一個特殊之處。不僅可以進(jìn)入和離開動畫，還可以改變定位。要使用這個新功能只需了解新增的 v-move attribute，它會在元素的改變定位的過程中應(yīng)用。