vue 路由過渡動效

<router-view> 是基本的動態組件，因此咱們能夠用 <transition> 組件給它添加一些過渡效果：

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

過渡的類名

在進入/離開的過渡中，會有 6 個 class 切換。

1. v-enter：定義進入過渡的開始狀態。在元素被插入以前生效，在元素被插入以後的下一幀移除。

2. v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入以前生效，在過渡/動畫完成以後移除。這個類能夠被用來定義進入過渡的過程時間，延遲和曲線函數。

3. v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入以後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成以後移除。

4. v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時馬上生效，下一幀被移除。

5. v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時馬上生效，在過渡/動畫完成以後移除。這個類能夠被用來定義離開過渡的過程時間，延遲和曲線函數。

6. v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發以後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成以後移除。

對於這些在過渡中切換的類名來講，若是你使用一個沒有名字的 <transition>，則 v- 是這些類名的默認前綴。若是你使用了 <transition name="my-transition">，那麼 v-enter 會替換爲 my-transition-enter。

Props：

• name - string，用於自動生成 CSS 過渡類名。例如：name: 'fade' 將自動拓展爲.fade-enter，.fade-enter-active等。默認類名爲 "v"
• appear - boolean，是否在初始渲染時使用過渡。默認爲 false。
• css - boolean，是否使用 CSS 過渡類。默認爲 true。若是設置爲 false，將只經過組件事件觸發註冊的 JavaScript 鉤子。
• type - string，指定過渡事件類型，偵聽過渡什麼時候結束。有效值爲 "transition" 和 "animation"。默認 Vue.js 將自動檢測出持續時間長的爲過渡事件類型。
• mode - string，控制離開/進入過渡的時間序列。有效的模式有 "out-in" 和 "in-out"；默認同時進行。
• duration - number | { enter: number, leave: number } 指定過渡的持續時間。默認狀況下，Vue 會等待過渡所在根元素的第一個 transitionend 或 animationend 事件。

過渡模式mode：

            1.in-out:新元素先進入過渡，完成以後當前元素過渡離開。

            2.out-in:當前元素先進行過渡離開，離開完成後新元素過渡進入。

例子：

 .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;
  }