想讓路由有過渡動畫，需要在<router-view>標(biāo)簽的外部添加<transition>標(biāo)簽，標(biāo)簽還需要一個(gè)name屬性

<transition name="fade">
  <router-view> </router-view>
</transition>

我們在/src/App.vue文件里添加了<transition>標(biāo)簽，并給標(biāo)簽起了一個(gè)名字叫fade。

css過渡類名： 組件過渡過程中，會有四個(gè)CSS類名進(jìn)行切換，這四個(gè)類名與transition的name屬性有關(guān)，比如name=”fade”,會有如下四個(gè)CSS類名：

1. fade-enter:進(jìn)入過渡的開始狀態(tài)，元素被插入時(shí)生效，只應(yīng)用一幀后立刻刪除。
2. fade-enter-active:進(jìn)入過渡的結(jié)束狀態(tài)，元素被插入時(shí)就生效，在過渡過程完成后移除。
3. fade-leave:離開過渡的開始狀態(tài)，元素被刪除時(shí)觸發(fā)，只應(yīng)用一幀后立刻刪除。
4. fade-leave-active:離開過渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，離開過渡完成后被刪除。

從上面四個(gè)類名可以看出，fade-enter-active和fade-leave-active在整個(gè)進(jìn)入或離開過程中都有效，所以CSS的transition屬性在這兩個(gè)類下進(jìn)行設(shè)置。

那我們就在App.vue頁面里加入四種CSS樣式效果，并利用CSS3的transition屬性控制動畫的具體效果。代碼如下：

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

上邊的代碼設(shè)置了改變透明度的動畫過渡效果，但是默認(rèn)的mode模式in-out模式，這并不是我們想要的。下面我們學(xué)一下mode模式。
過渡模式mode：
in-out:新元素先進(jìn)入過渡，完成之后當(dāng)前元素過渡離開。
out-in:當(dāng)前元素先進(jìn)行過渡離開，離開完成后新元素過渡進(jìn)入。

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