Vue 教程：使用 Transition 与 TransitionGroup 实现页面与列表的过渡动画

快速概述

在 Vue 应用中，页面切换与列表增删的动画能显著提升交互体验。Transition 与 TransitionGroup 是 Vue 内置的过渡组件，分别用于单个元素/组件和列表的进入、离开、移动动画。它们适用于路由切换、条件渲染、列表动态增删等场景。前置要求：熟悉 Vue 基础语法（如 v-for、v-if），并已安装 Vue 3 或 Vue 2.7+ 项目环境。

核心概念与原理

Transition 组件在元素插入或移除时，自动检测并应用 CSS 过渡或动画。其核心机制是通过在元素上动态添加/移除类名（如 v-enter、v-leave-to），配合 CSS 定义过渡效果。TransitionGroup 则用于列表，它额外支持移动过渡（v-move），并可通过 tag 属性指定渲染的容器元素，避免默认渲染为 。理解这些类名的生命周期是掌握动画的关键。

实战步骤与代码

1. 基础页面搭建

首先创建 Vue 项目，并在组件中引入 TransitionGroup。以下示例展示一个简单的列表动画（基于 Vue 2.4 语法，适用于 Vue 3 需调整）：

<template>
  <div id="app">
    <button @click="addItem">添加</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>
<script> export default { data() { return { items: [{ id: 1, text: '项目1' }] }; }, methods: { addItem() { this.items.push({ id: Date.now(), text: '新项目' }); } } }; </script>

2. 定义过渡样式

为列表项添加进入和离开动画，并设置 hover 效果（参考 中的样式设计）：

<style>
li {
  border: 1px dashed red;
  margin-top: 5px;
  line-height: 40px;
  padding-left: 10px;
}
li:hover {
  background-color: aquamarine;
  transition: all 0.8s ease;
}
.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

3. 页面级过渡

对于路由切换，可使用 Transition 包裹 router-view，并设置 name 属性以区分不同页面的动画。注意需要为每个路由组件设置唯一的 key，否则过渡不会触发。

常见坑点与优化

• key 必须唯一：TransitionGroup 中的每一项必须绑定唯一的 key，否则动画会失效或出现渲染错误。
• tag 属性：默认渲染为 ，若需要
  或
  ，务必指定 tag，否则列表结构会异常。
  性能优化：避免在动画中使用高消耗属性（如 box-shadow），可开启 GPU 加速（transform、opacity）。对于大型列表，考虑使用虚拟滚动。
  Vue 版本差异：Vue 3 中过渡类名改为 v-enter-from 等，需查阅对应文档。

  总结

  通过 Transition 与 TransitionGroup，开发者能以极简代码实现流畅的动画效果。掌握类名机制、合理设置 key 与 tag，并注意性能优化，即可在项目中灵活运用。