Vue过渡组件

Vue 提供 <Transition> 和 <TransitionGroup> 两个内置组件，封装元素进入/离开 DOM 时的动画逻辑。

Transition 组件

核心属性

基本用法

<template>
  <Transition name="fade" mode="out-in">
    <component :is="currentView" />
  </Transition>
</template>

<script setup>
import { ref } from 'vue'

const currentView = ref('Home')
</script>

appear 属性

<Transition name="fade" appear>
  <p>初次渲染时淡入</p>
</Transition>

appear 使组件在首次挂载时也应用过渡效果，适用于页面级动画。

Transition 事件

<Transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
  <p v-if="show">内容</p>
</Transition>

<script setup>
const beforeEnter = (el) => {
  console.log('进入前', el)
}

const enter = (el, done) => {
  // 执行动画
  done()
}

const afterEnter = (el) => {
  console.log('进入完成', el)
}

const leaveCancelled = (el) => {
  // v-show 模式下的离开被取消
}
</script>

*-cancelled 事件仅在 v-show 模式下触发，因为 v-if 会直接移除元素。

多元素过渡

使用 key 区分

<Transition name="slide" mode="out-in">
  <button v-if="isEditing" key="save">保存</button>
  <button v-else key="edit" @click="isEditing = true">编辑</button>
</Transition>

同类型元素过渡时，必须设置不同 key，否则 Vue 会复用元素导致动画失效。

动态组件过渡

<Transition name="fade" mode="out-in">
  <Home v-if="page === 'home'" />
  <About v-else-if="page === 'about'" />
  <Contact v-else />
</Transition>

TransitionGroup 组件

核心属性

基本用法

<template>
  <TransitionGroup tag="ul" name="list">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </TransitionGroup>
</template>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

.list-leave-active {
  position: absolute; /* 避免脱离文档流影响其他元素 */
}
</style>

TransitionGroup 不支持 mode 属性，因为列表项是同时进入/离开的。

FLIP 动画

自动移动动画

<TransitionGroup tag="div" name="item" class="container">
  <div v-for="item in sortedItems" :key="item.id" class="item">
    {{ item.name }}
  </div>
</TransitionGroup>

<style>
.item-move {
  transition: transform 0.4s ease;
}
</style>

Vue 使用 FLIP 技术自动计算元素位置变化并应用过渡，无需手动处理。

要点总结

• <Transition> 用于单元素过渡，<TransitionGroup> 用于列表多元素过渡
• name 控制 CSS 类名前缀，mode 控制进入/离开顺序
• 同类型元素过渡时必须设置不同 key
• TransitionGroup 自动应用 FLIP 动画处理元素位置变化
• 事件钩子支持 CSS 和 JavaScript 两种动画实现方式

存放路径: articles/VUE/进阶/过度动画与状态复用/Vue过渡组件.md