摘要

我們可以透過動態地綁定 <Transition> 元件的 name 屬性，來根據應用程式的狀態，靈活地切換不同的過渡動畫效果。

定義與說明

<Transition> 的 name 屬性決定了其應用的 CSS class 的前綴。我們可以將 name 綁定到一個響應式資料上。當這個資料改變時，過渡效果也會隨之改變，從而應用不同的 CSS 動畫規則。

實作範例

動態過渡示例

<script setup>
import { ref } from 'vue';
const transitionName = ref('slide-left');
// ... 在某處邏輯中，可能會改變 transitionName 的值為 'slide-right'
</script>
<template>
  <Transition :name="transitionName">
    <!-- ... -->
  </Transition>
</template>
<style>
.slide-left-enter-from { /* ... */ }
.slide-right-enter-from { /* ... */ }
</style>

結論

動態過渡名稱為我們的動畫系統增加了程式化的控制能力，特別適用於實現輪播圖、路由切換等需要根據上下文（如前進或後退）應用不同動畫的場景。

動態過渡條件動畫響應式