Vue基础教程（147）过渡和动画效果之列表过渡中的列表的进入/离开过渡：别让你的列表死气沉沉！Vue过渡动画让数据“蹦迪”入门指南

一、为什么你的列表需要“蹦迪”？

想象一下这个场景：你的页面上有个待办事项列表，用户添加新项目时，它“啪”一下突然出现；删除时又“嗖”一声直接消失。这种体验就像去看演唱会，歌手突然从舞台底下弹出来，又突然掉下去——惊悚有余，美感不足。

这就是Vue过渡动画存在的意义！它能让你的列表变化不再生硬，像专业舞者一样优雅入场、完美退场。数据本没有生命，但通过精心设计的过渡效果，你能让用户感受到：这不仅仅是一堆冷冰冰的文字，而是有呼吸、有节奏的界面元素。

在Vue中，列表过渡不只是“锦上添花”的装饰品。恰当使用的过渡动画能够：

引导用户视线：新元素加入时，视线自然跟随
提供操作反馈：删除时有个收缩动画，用户就知道“嗯，确实删掉了”
增强专业感：细节处见真章，提升产品整体质感
掩盖加载延迟：数据 fetching 时用个骨骼动画，用户更愿意等待

二、Vue过渡系统：给你的元素请个“编舞老师”

在深入列表过渡之前，我们先快速了解Vue的过渡系统。Vue提供了一个内置的<transition>组件，专门用于控制单个元素的进入和离开过渡。你可以把它理解为给元素请了个专业的编舞老师，负责教元素如何优雅地登场和退场。

但是这个“编舞老师”有个局限——同一时间只能教一个学生（元素）。当你要给一群元素（比如列表）设计集体舞时，<transition>就力不从心了。这时候，你需要升级版的“团体操教练”——<transition-group>。

<transition-group>组件是Vue为列表过渡量身定制的解决方案，它有几个关键特性：

渲染为真实元素：默认是<span>，但你可以通过tag属性指定为其他标签
每个子项必须有独立的key：就像每个舞者要有自己的编号
支持进入/离开过渡：新成员入队、老成员离队都有专属动画
内置定位智能：元素位置变化时，其他成员会平滑移动到位

三、列表进入/离开过渡：让数据排队“蹦迪”

3.1 基础概念：什么是进入和离开？

在Vue的语境中：

进入过渡：当元素首次被渲染到DOM时（比如v-for列表新增了一项）
离开过渡：当元素从DOM中被移除时（比如删除了一条数据）

这就像夜店门口：新客人要入场（进入），老客人要离场（离开）。好的过渡效果就像专业的保安和迎宾，让整个过程井然有序又不失热情。

3.2 CSS类名：过渡的“舞蹈动作分解”

Vue的过渡动画基于6个CSS类名的自动添加和移除：

进入阶段：

- v-enter-from：进入开始状态（准备入场）
- v-enter-active：进入活跃状态（正在入场）
- v-enter-to：进入结束状态（入场完成）

离开阶段：

- v-leave-from：离开开始状态（准备退场）
- v-leave-active：离开活跃状态（正在退场）
- v-leave-to：离开结束状态（退场完成）

这里的v-是默认前缀，如果你给<transition-group>设置了name属性，比如name="list"，那么类名就会变成list-enter-from、list-enter-active等。

3.3 工作原理：Vue如何编排这场“舞蹈”？

当一个新元素加入列表时：

Vue先添加v-enter-from和v-enter-active类
下一帧移除v-enter-from，添加v-enter-to
过渡结束后，移除所有相关类名

元素离开时也是类似的流程，只是方向相反。

这就像教一个完全不会跳舞的人：

先告诉他起始姿势（v-enter-from）
然后放音乐开始跳（v-enter-active）
慢慢跳到最终位置（v-enter-to）
音乐停止，动作完成（移除所有类）

四、手把手编码：打造丝滑列表过渡效果

理论说再多不如实际操练，下面我们通过一个完整的购物车示例，一步步实现各种酷炫的列表过渡效果。

4.1 环境搭建和基础列表

首先，创建基础的Vue应用和静态列表：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue列表过渡实战 - 购物车动画</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></scri