Vue 3的transition是一個獨立的組件，用于在視圖中添加動畫效果。它使用了“狀態機”的概念來管理不同狀態下的動畫行為。在Vue 3中，transition有了一些新特性，比如更好的性能和更簡單的API。

在Vue 3中，transition被重構了。它不再依賴于Vue的生命周期鉤子，而是使用新的Vue Composition API。這意味著我們可以更自由、更靈活地控制動畫的行為。我們可以使用setup()函數編寫自定義的動畫邏輯，并通過toRefs()將數據暴露給動畫組件。

import { defineComponent, toRefs } from 'vue'
export default defineComponent({
setup() {
const { show, toggle } = useToggle()
return { ...toRefs(useAnimation(show)), toggle }
}
})

在Vue 3中，transition還引入了新的屬性，如appear和mode。appear屬性用于定義元素第一次出現時的動畫效果。mode屬性指定了在不同狀態下的動畫行為，有in-out、out-in和default三種模式。

在使用Vue 3 transition時，我們還需要注意一個重要的變化：過渡類名的改變。Vue 3中，過渡類名由原來的v-enter和v-leave改為了更加語義化的enter-from、enter-to、leave-from和leave-to。這使得我們在使用CSS進行動畫效果的設計時更加直觀。

.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
opacity: 1;
}

總的來說，Vue 3 transition為我們帶來了更加強大、更加易用的動畫功能。它不僅提供了靈活的API，還優化了性能，并更好地與Composition API協同工作。通過合理地使用Vue 3 transition，我們可以打造出更加生動、有趣的用戶界面，給用戶帶來更好的體驗。