在Vue中，過渡效果可以顯示在元素進入或離開DOM時。例子：當一個元素被 v-if 或者其他條件指令控制條件下的動態才被渲染時，在它第一次渲染或者離開的時候為其添加一些過渡效果。

在Vue中實現過渡效果，可以使用動畫CSS類名（enter, enter-active, enter-to, leave, leave-active, leave-to），或使用JavaScript鉤子函數（beforeEnter, enter, afterEnter, enterCancelled, beforeLeave, leave, afterLeave, leaveCancelled）。

<template>
<transition
name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled">
<div
v-if="show"
key="test"
class="fade">
{{ message }}
</div>
</transition>
</template>
<script>
export default {
data() {
return {
show: false,
message: "Hello World"
};
},
methods: {
beforeEnter(el) {
console.log("beforeEnter");
},
enter(el, done) {
console.log("enter");
done();
},
afterEnter(el) {
console.log("afterEnter");
},
enterCancelled(el) {
console.log("enterCancelled");
},
beforeLeave(el) {
console.log("beforeLeave");
},
leave(el, done) {
console.log("leave");
done();
},
afterLeave(el) {
console.log("afterLeave");
},
leaveCancelled(el) {
console.log("leaveCancelled");
}
}
};
</script>

上面是一個使用JavaScript鉤子函數實現的簡單過渡效果。transition包裹了要過渡的元素div，使用name屬性指定了過渡的CSS類名。使用JavaScript鉤子函數時，需要通過事件監聽函數來指定觸發哪個JavaScript鉤子函數。在JavaScript鉤子函數中，可以為過渡元素添加CSS類名或者使用JavaScript設置元素屬性，也可以使用Vue提供的動畫鉤子函數完成過渡效果的動畫。

除了JavaScript鉤子函數，Vue還提供了一些鉤子函數可以用于處理動畫，如appear，appear-active，以及相應的鉤子函數。appear和appear-active與enter和enter-active基本相同，它們用于首次加載時的過渡效果。如果你需要在此處進行一些額外處理，則可以覆蓋它們。

最后，需要注意的是，最好使用transition包裹單個標簽。如果包含多個標簽，Vue在渲染時可能無法正確確定進入或離開的標簽。在這種情況下，可以使用transition-group來包含多個標簽以同時執行過渡效果。