Vue.js: 过渡与动画

<!-- v-bind:name="fade" → 6 个 class 是 .fade-xxx -->
<Transition name="fade">...</Transition>

<!-- 不写 name → 默认 v-xxx（6 个 class 是 .v-xxx）-->
<Transition>...</Transition>

<!-- 动态 name -->
<Transition :name="transitionName">...</Transition>

<!-- 1. 默认模式：进入和离开同时进行（重叠） -->
<Transition name="fade">
  <div v-if="show">Content</div>
</Transition>

<!-- 2. out-in：先离开后进入（推荐，避免重叠） -->
<Transition name="fade" mode="out-in">
  <div v-if="show">Content</div>
</Transition>

<!-- 3. in-out：先进入后离开（少见） -->
<Transition name="fade" mode="in-out">
  <div v-if="show">Content</div>
</Transition>

初始两块区域都显示绿色「A 卡片」，按钮文字是「切换卡片（当前 A）」。
点按钮后：上方「默认模式」区域旧卡片淡出与新卡片淡入同时进行，绿色和蓝色卡片短暂叠在一起，容器高度会抖一下。
下方 `mode="out-in"` 区域先等绿色卡片淡出（约 0.5 秒），再淡入蓝色「B 卡片」，任何时刻只看到一张卡片。
再点一次又切回 A，两块的差别同样清晰。

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s;
}
.slide-enter-from {
  transform: translateX(-100%);
}
.slide-leave-to {
  transform: translateX(100%);
}

.scale-enter-active, .scale-leave-active {
  transition: transform 0.3s;
}
.scale-enter-from, .scale-leave-to {
  transform: scale(0);
}

.rotate-enter-active {
  transition: transform 1s;
}
.rotate-enter-from {
  transform: rotate(0deg);
}
.rotate-leave-active {
  animation: bounce 0.5s;
}
@keyframes bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.combo-enter-active, .combo-leave-active {
  transition: all 0.3s;
}
.combo-enter-from {
  opacity: 0;
  transform: translateX(-50px) scale(0.8);
}
.combo-leave-to {
  opacity: 0;
  transform: translateX(50px) scale(0.8);
}

/* 列表项位置变化时（如排序），自动应用 .list-move */
.list-move {
  transition: transform 0.5s;
}

列表初始 3 行：Vue / Router / Pinia，每行右侧有红色 × 按钮。
点「添加一项」：新行「新项 4」在末尾淡入并从右侧滑入（0.5 秒）；再点得到「新项 5」。
点某一行的 × 该行淡出，其它行在 0.5 秒内平滑上移补位，不会瞬移。
点「首项移到底部」：第一行平滑下滑到末尾，其余行依次上移，整个过程是连续移动而不是跳变。

<template>
  <Transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    :css="false"  <!-- 禁用 CSS class -->
  >
    <p v-if="show">Hello</p>
  </Transition>
</template>

<script setup>
import gsap from 'gsap'

function beforeEnter(el) {
  console.log('Before enter:', el)
}

function enter(el, done) {
  gsap.to(el, {
    opacity: 1,
    y: 0,
    duration: 0.5,
    onComplete: done  // 通知完成
  })
}

function afterEnter(el) {
  console.log('After enter:', el)
}

// leave / beforeLeave / afterLeave 类似
</script>

npm install gsap

<template>
  <Transition :css="false" @enter="onEnter" @leave="onLeave">
    <p v-if="show">Hello GSAP</p>
  </Transition>
</template>

<script setup>
import gsap from 'gsap'

function onEnter(el, done) {
  gsap.fromTo(el, 
    { opacity: 0, y: 50 },
    { opacity: 1, y: 0, duration: 0.5, onComplete: done }
  )
}

function onLeave(el, done) {
  gsap.to(el, { opacity: 0, y: -50, duration: 0.3, onComplete: done })
}
</script>

npm install animate.css

// main.js
import 'animate.css'

npm install @vueuse/motion

// main.js
import { MotionPlugin } from '@vueuse/motion'
app.use(MotionPlugin)

页面从上到下依次是 5 个区块：Fade、Slide、Scale Modal、TransitionGroup 列表、Combo Tab。
Fade 区默认显示「👋 Hello Fade」，点「隐藏」淡出、按钮变为「显示」，再点淡入。
Slide 区默认显示「👉 Slide 滑入」，点「切换」向右滑出、从左滑入；点「打开 Modal」弹窗缩放出现，点遮罩或「关闭」缩放消失。
列表初始有「项目 1」「项目 2」，输入名称点「添加」新项淡入并平滑移动，点 × 淡出后其余项上移。
Tab 默认 Home，点 Profile / Settings 时旧内容先淡出、新内容再淡入，显示「当前 Tab: Profile」等。