Vue過渡動畫是用于在元素插入、更新時添加動畫效果的一種方式。通過Vue的過渡類來實現，包括四個CSS類名前綴：v-enter、v-leave、v-enter-active、v-leave-active。

// transition組件
<transition
appear
name="fade"
mode="out-in">
<!-- 組件代碼 -->
</transition>
// CSS樣式
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}

上面的代碼中，transition組件有一個name屬性，它用于指定過渡類名的前綴。在這個例子中，過渡類名前綴為fade。同時，我們還可以設置appear屬性表示組件出現時是否應用過渡，mode屬性表示過渡模式，值可以為"in-out"、"out-in"或"simultaneous"。

接下來，在CSS樣式中，我們定義了過渡的動畫效果。這里我們使用了opacity屬性來實現淡入淡出效果，同時過渡類名前綴為fade的組件需要在過渡開始和結束時應用CSS樣式，因此我們要定義fade-enter-active和fade-leave-active兩個類名。

而fade-enter和fade-leave-to這兩個類名則用來定義組件進入和離開時的狀態。

除了淡入淡出效果，Vue過渡動畫還支持多種效果，如滑動、縮放等。下面是一個使用collapse效果的例子。

// transition組件
<transition
appear
name="collapse"
mode="out-in">
<!-- 組件代碼 -->
</transition>
// CSS樣式
.collapse-enter-active,
.collapse-leave-active {
transition: height .5s;
}
.collapse-enter,
.collapse-leave-to {
height: 0;
opacity: 0;
}

這里我們將過渡類名前綴設置為collapse，使用了height屬性來實現組件高度的變化。因為在過渡狀態中，組件的高度會發生變化，因此需要動態設置height屬性。

總結來說，Vue過渡動畫是使用過渡類名實現動畫效果的一種方式，可實現多種效果，如淡入淡出、滑動、縮放等。通過transition組件和CSS樣式，我們可以輕松定義過渡動畫效果，讓頁面變得更加生動有趣。