Transition 包住单个元素后，Vue 会在其显示与隐藏的时机自动添加 v-enter-from、v-enter-active、v-enter-to 与对应的 leave 类名，开发者只要写好 CSS 过渡或关键帧动画即可。它对 v-if、v-show、动态组件切换都无缝生效，appear 属性还能控制首次渲染是否也带动画。
进阶用法包括用 mode 设置进出场顺序（out-in 先离场再进场，避免同时存在互相覆盖），以及结合 TransitionGroup 给 v-for 列表加移动动画（move 类配合 FLIP 实现平滑换位）。如果嫌默认类名长，name 属性可以批量改名，钩子属性还能在动画各阶段执行 JS 逻辑。
<template> <button @click="show = !show">切换</button> <Transition name="fade" mode="out-in" appear> <p v-if="show">我淡入淡出，首次渲染也会播动画</p> </Transition> </template> <script setup> import { ref } from 'vue'; const show = ref(true); </script> <style scoped> .fade-enter-active, .fade-leave-active { transition: opacity .3s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } </style>