摘要

<Transition> 是一個內建的包裝元件，它能為單一元素或元件的「進入」和「離開」過程，自動應用過渡動畫。

定義與說明

<Transition> 只能包裹一個子元素。當其子元素因 v-if、v-show 或動態元件切換而被插入或移除 DOM 時，<Transition> 會在適當的時機，自動為該元素新增或移除一系列的 CSS class，讓我們可以透過 CSS 來定義過渡動畫。

實作範例

Transition 元件示例

<script setup>
import { ref } from 'vue';
const show = ref(true);
</script>

<template>
  <button @click="show = !show">切換</button>
  <Transition name="fade">
    <p v-if="show">你好，世界</p>
  </Transition>
</template>

<style>
/* 定義名為 'fade' 的過渡效果 */
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>

結論

<Transition> 提供了一個簡單、宣告式的方式來為元素的出現與消失添加動畫，是讓使用者介面更生動、更具吸引力的基礎工具。

Transition 動畫過渡效果