<Transition>
Applies enter/leave animations to a single element or component.
Syntax
<Transition name="fade">...</Transition>Parameters
| Name | Type | Required | Description |
|---|---|---|---|
name | string | No | Prefix for the generated CSS transition classes. |
Returns
component — Wraps content with transition hooks.
Examples
<script setup lang="ts">
import { ref } from 'vue';
const show = ref(true);
</script>
<template>
<button @click="show = !show">Toggle</button>
<Transition name="fade">
<p v-if="show">Hello</p>
</Transition>
</template>
<style>
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>
Notes
<Transition> animates a single child as it is inserted or removed via v-if,
v-show, or dynamic components. It applies classes like `name-enter-from`,
`name-enter-active`, `name-leave-to`. Use mode="out-in" to sequence
transitions, or JS hooks for custom animation libraries.