摘要

為了在整個應用程式中保持動畫風格的一致性並避免重複程式碼，我們可以將一個配置好的 <Transition> 元件及其樣式，封裝成一個可重用的元件。

定義與說明

我們可以建立一個新的元件（例如 FadeTransition.vue），其內部只包含一個帶有預設 name 和樣式的 <Transition> 元件，並使用 <slot> 來接收需要被動畫化的內容。這樣，在其他地方我們只需要使用這個自訂的過渡元件即可。

實作範例

可重用過渡元件示例

<!-- components/FadeTransition.vue -->
<template>
  <Transition name="fade" mode="out-in">
    <slot></slot>
  </Transition>
</template>
<style>
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>

<!-- App.vue -->
<script setup>
import FadeTransition from './components/FadeTransition.vue';
</script>
<template>
  <FadeTransition>
    <p :key="text">{{ text }}</p>
  </FadeTransition>
</template>

結論

建立可重用的過渡元件是 Vue 開發中的一個重要最佳實踐。它有助於建立設計系統、統一使用者體驗，並讓動畫的管理變得更加簡單和高效。

可重用元件設計系統 slot