概述
Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡。
主要用於 v-show, v-if 或 router-view 的過渡動畫，分為進場和出場。
官方示例
<template> <div id="example"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div></template>
<script>export default { data () { return { show: true } }}</script>
<style lang="scss">.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 { transform: translateX(10px); opacity: 0;}</style>過渡的類名
在進入/離開的過渡中，會有 6 個 class 切換。
v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。
v-enter-to：2.1.8 版及以上定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。
v-leave：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。
v-leave-to：2.1.8 版及以上定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。
給transition組件設置不同的name
對於這些在過渡中切換的類名來說，如果你使用一個沒有名字的 <transition>，則 v- 是這些類名的默認前綴。
如果你使用了 <transition name="my-transition">，那麼 v-enter 會替換為 my-transition-enter。
在Vue頁面通過watch監聽路由的變化，給transition組件設置不同的name，從而實現不同的過渡動畫。
<template> <div id="home"> <transition :name="transitionName"> <keep-alive> <router-view></router-view> </keep-alive> </transition> </div></template>
<script>export default { name: "Demo", components: { }, data() { return { transitionName: "", }; }, watch: { $route(to, from) { if (to.meta.index > from.meta.index) { this.transitionName = "slide-left"; } if(to.meta.index < from.meta.index){ this.transitionName = "slide-right"; } if (to.meta.index = from.meta.index) { this.transitionName = "slide-com"; } else { this.transitionName = "slide-back"; } }, },};</script><style scoped></style>css屬性transition
過渡用的專場動畫，通常就是，淡入淡出，放大縮小，或者左右側進出。
通過css的transition屬性來實現。
1.transition簡介
css屬性transition能讓頁面元素不是立即的、而是慢慢的從一種狀態變成另外一種狀態，從而表現出一種動畫過程。
根據開始狀態和結束狀態的具體數值，計算出中間狀態。
2.transition屬性語法
屬性
介紹
transition-property
規定設置過渡效果的 CSS 屬性的名稱。
例如, opacity,color。默認值是all。
transition-duration
規定完成過渡效果需要多少秒或毫秒。
例如，1s。默認值是0s。
transition-timing-function
規定速度效果的速度曲線。
例如, linear、 ease-in、steps動畫分段函數或自定義的 cubic-bezier 函數)。默認值是ease，中間快，兩頭慢。
transition-delay
定義過渡效果何時開始。
例如，1s。默認值是0s。
transition-property
規定設置過渡效果的 CSS 屬性的名稱。
例如, opacity,color。默認值是all。
transition-duration
規定完成過渡效果需要多少秒或毫秒。
例如，1s。默認值是0s。
transition-timing-function
規定速度效果的速度曲線。
例如, linear、 ease-in、steps動畫分段函數或自定義的 cubic-bezier 函數)。
默認值是ease，中間快，兩頭慢。
transition-delay
屬性指定何時將開始切換效果。
transition-delay值是指以秒為單位（S）或毫秒（ms）
示例代碼
div { width: 100px; height: 100px; background-color: orange; margin: 20px auto; border-radius: 100%; -webkit-transition-property: -webkit-border-radius; transition-property: border-radius; -webkit-transition-duration: 3s; transition-duration: 3s; -webkit-transition-timing-function：ease; transition-timing-function：ease; div:hover { border-radius: 0px;}3.transition屬性語法簡寫
transition-property
transition-duration
transition-timing-function
transition-delay
以上，這四個屬性，可以簡寫在一行代碼裡面，如下所示
transition: property duration timing-function delay;4.瀏覽器支持
transition 是css3中的屬性。僅支持以下瀏覽器：
Internet Explorer 10+
Firefox
Opera
Chrome
Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。
ps:安利一下Animate.css 一款強大的預設css3動畫庫
https://animate.style/
優缺點
transition使用簡單，能較好的實現過渡動畫。
但是，無法處理一個組件中父子元素的聯動動畫。查看源碼後，就可以知道原因。因為，本質上他只能作用於特定指令所影響的特定元素。
PS:安利一個github上頁面過渡插件
https://github.com/repairearth/vue-router-transition
參考文章
Vue 源碼解析之一：transition
https://blog.csdn.net/weixin_34396103/article/details/89412044
CSS transition 屬性
https://www.w3school.com.cn/cssref/pr_transition.asp