Vue內(nèi)置組件<transition>可以給任何元素，組件添加過(guò)渡渗钉，用<transition name='xxx'[可選]>包裹元素、組件袋倔。
當(dāng)插入或刪除包含在 transition 組件中的元素時(shí)，Vue 將會(huì)做以下處理：
1. 自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了 CSS 過(guò)渡或動(dòng)畫(huà)折柠，如果是宾娜，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類名。
2. 如果過(guò)渡組件提供了 JavaScript 鉤子函數(shù)扇售，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用前塔。
3. 如果沒(méi)有找到 JavaScript 鉤子并且也沒(méi)有檢測(cè)到 CSS 過(guò)渡/動(dòng)畫(huà)，DOM 操作 (插入/刪除) 在下一幀中立即執(zhí)行承冰。
過(guò)渡類名：
ps:假如使用一個(gè)沒(méi)有名字的 <transition>华弓，則 v- 是這些類名的默認(rèn)前綴。如果你使用了 <transition name="my-transition">困乒，那么 v-enter 會(huì)替換為 my-transition-enter寂屏。
CSS過(guò)渡
/* CSS文件 可以設(shè)置不同的進(jìn)入和離開(kāi)動(dòng)畫(huà) */
/* 設(shè)置持續(xù)時(shí)間和動(dòng)畫(huà)函數(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 動(dòng)畫(huà)
CSS 動(dòng)畫(huà)用法同 CSS 過(guò)渡，區(qū)別是在動(dòng)畫(huà)中 v-enter 類名在節(jié)點(diǎn)插入 DOM 后不會(huì)立即刪除娜搂，而是在 animationend 事件觸發(fā)時(shí)刪除迁霎。
過(guò)渡模式
<transition>默認(rèn)行為是 進(jìn)入和離開(kāi) 同時(shí)發(fā)生，在一些場(chǎng)景會(huì)不適用百宇，因此提供了 過(guò)渡模式考廉。
```
in-out：新元素先進(jìn)行過(guò)渡，完成之后當(dāng)前元素過(guò)渡離開(kāi)恳谎。
out-in：當(dāng)前元素先進(jìn)行過(guò)渡芝此，完成之后新元素過(guò)渡進(jìn)入。
方法：<transition mode="in-out">
**列表過(guò)渡 <transition-group>**
1. 過(guò)渡同時(shí)渲染在整個(gè)列表上因痛，過(guò)渡模式不可用
2.<transition-group> 組件還有一個(gè)特殊之處。不僅可以進(jìn)入和離開(kāi)動(dòng)畫(huà)岸更，還可以改變定位鸵膏。要使用這個(gè)新功能只需了解新增的 v-move attribute，它會(huì)在元素的改變定位的過(guò)程中應(yīng)用怎炊。