Vue基础教程（146）过渡和动画效果之列表过渡：别让你的列表像木头人！Vue的丝滑小连招来啦

朋友们，有没有遇到过这种尴尬——你的Vue应用功能完美，但列表更新时那种“啪一下”的生硬切换，总让人感觉少了点灵魂？就像看一部没有特效的科幻片，剧情再好也总觉得差点意思。

别担心，今天咱们要聊的Vue列表过渡，就是为你解决这个痛点的！它就像是给你的列表元素请了个专业舞蹈教练，让每个项目的入场、退场和移动都变得优雅而协调。

为什么列表过渡不是可有可无的装饰品？

在深入代码之前，咱们先搞清楚一个问题：为什么要在列表动画上花时间？

首先，动画是用户体验的隐形向导。 当用户删除一个列表项时，如果它瞬间消失，用户可能会疑惑：“它去哪了？是我操作成功了吗？”但如果有淡出动画，用户的眼睛就能自然地跟踪到变化，理解发生了什么。

其次，动画提供连续性。 想想看，当列表重新排序时，如果没有动画，元素只是突然跳到了新位置。但有了过渡，用户的注意力会跟随元素移动到新位置，保持了视觉连贯性。

最重要的是，好的动画让人感觉应用更“快”。 即使实际处理时间相同，有动画反馈的交互会被感知为更迅速、更流畅。

认识今天的明星：`<transition-group>`组件

如果你已经用过Vue的<transition>组件，那么<transition-group>就是它的团队版。不同于<transition>只能包裹单个元素，<transition-group>是专门为列表场景设计的。

它有几个关键特性：

渲染为真实元素：默认渲染为<span>，但你可以通过tag属性指定为<ul>、<div>或其他任何标签
每个子项必须有唯一的key：这是列表过渡工作的前提
自动应用过渡类名：就像<transition>一样，它会自动在恰当的时候添加v-enter、v-enter-active等类名
支持移动过渡：这是最酷的部分！当列表项改变位置时，Vue会自动检测并应用移动动画

基础实战：让待办事项活起来

理论说得再多，不如代码来得实在。来，咱们先来个基础示例——一个会动的待办事项列表：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动起来的待办事项</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .list-move, /* 对移动中的元素应用过渡 */
        .list-enter-active,
        .list-leave-active {