<router-view> 是基本的動(dòng)態(tài)組件，所以我們可以用 <transition> 組件給它添加一些過渡效果：

 <transition name="slide-left" mode="out-in">
        <router-view />
</transition>

過渡的類名

在進(jìn)入/離開的過渡中，會有 6 個(gè) class 切換。

1. v-enter：定義進(jìn)入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。

2. v-enter-active：定義進(jìn)入過渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。

3. v-enter-to: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter 被移除)，在過渡/動(dòng)畫完成之后移除。

4. v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)立刻生效，下一幀被移除。

5. v-leave-active：定義離開過渡生效時(shí)的狀態(tài)。在整個(gè)離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時(shí)立刻生效，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義離開過渡的過程時(shí)間，延遲和曲線函數(shù)。

6. v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave 被刪除)，在過渡/動(dòng)畫完成之后移除。

對于這些在過渡中切換的類名來說，如果你使用一個(gè)沒有名字的 <transition>，則 v- 是這些類名的默認(rèn)前綴。如果你使用了 <transition name="my-transition">，那么 v-enter 會替換為 my-transition-enter。

Props：

• name - string，用于自動(dòng)生成 CSS 過渡類名。例如：name: 'fade' 將自動(dòng)拓展為.fade-enter，.fade-enter-active等。默認(rèn)類名為 "v"
• appear - boolean，是否在初始渲染時(shí)使用過渡。默認(rèn)為 false。
• css - boolean，是否使用 CSS 過渡類。默認(rèn)為 true。如果設(shè)置為 false，將只通過組件事件觸發(fā)注冊的 JavaScript 鉤子。
• type - string，指定過渡事件類型，偵聽過渡何時(shí)結(jié)束。有效值為 "transition" 和 "animation"。默認(rèn) Vue.js 將自動(dòng)檢測出持續(xù)時(shí)間長的為過渡事件類型。
• mode - string，控制離開/進(jìn)入過渡的時(shí)間序列。有效的模式有 "out-in" 和 "in-out"；默認(rèn)同時(shí)進(jìn)行。
• duration - number | { enter: number, leave: number } 指定過渡的持續(xù)時(shí)間。默認(rèn)情況下，Vue 會等待過渡所在根元素的第一個(gè) transitionend 或 animationend 事件。

例子：

 .slide-left-enter {
    opacity: 0;
    -webkit-transform: translate(30px, 0);
    transform: translate(30px, 0);
  }
  .slide-left-enter-active{
    transition: all .5s ease;
  }
  .slide-left-leave-to{
    opacity: 0;
    -webkit-transform: translate(-30px, 0);
    transform: translate(-30px, 0);
  }
  .slide-left-leave-active {
    transition: all .5s ease;
  }