Vue基础教程（145）过渡和动画效果之多个元素的过渡：带你告别动画翻车，优雅驾驭“团伙动画”，让你的页面互动体验直接封神

第一章：从“单打独斗”到“团伙作案”，你准备好了吗？

想象一下，你刚刚用Vue的<transition>组件，给一个按钮做好了淡入淡出的效果。看着它优雅地显现、消失，你感觉自己就是个动画大师，对吧？那种感觉，就像新手村你拿着一把木剑，砍翻了第一只小鸡，成就感爆棚。

但是！ 现实世界的需求，从来不会这么善良。它们会像潮水一样涌来：

场景一： 一个待办事项列表，你删除了中间一项，希望下面的项能“丝滑”地向上移动补位，而不是集体闪现。
场景二： 一个标签页切换，希望旧的标签内容淡出后，新的再淡入，而不是两个内容同时挤在一起，上演“左右互搏”。
场景三： 购物车里的商品数量增减，希望数字能有一个“蹦蹦跳跳”的过渡效果。

看到没？这都是“多个元素”在搞事情！这时候，如果你还只会用单个<transition>，那页面效果简直就是一场灾难：元素乱飞、过渡打架、用户体验堪比上世纪90年代的Flash网站。

别慌！Vue早就为我们准备好了“团伙动画”的终极解决方案。今天就让我们化身“动画交警”，来指挥好这些元素车辆，让它们有序、优雅地完成切换！

第二章：核心武器库——认识`<transition-group>`

面对多个元素，我们的<transition>大哥就有点力不从心了。这时，必须请出它的亲兄弟——<transition-group>！

这家伙和<transition>有啥不同？咱们用“找不同”的游戏来理解：

渲染为真实元素： <transition>是个抽象组件，不渲染DOM。而<transition-group>默认渲染为一个<span>！你可以通过tag属性把它变成任何你想要的标签，比如<ul>、<div>等。它需要一个容器来包裹所有要过渡的孩子。
独家秘技——位置过渡： 这是<transition-group>的杀手锏！当子元素位置发生变化（比如排序、删除中间项）时，它能通过内置的 v-move 类，让移动的过程也拥有过渡动画。这个特性是单个<transition>绝对做不到的。

基本语法结构：

<transition-group name="fade" tag="div">
  <div v-for="item in items" :key="item.id">
    {{ item.text }}
  </div>
</transition-group>

记住两个关键点：tag 定义容器标签，:key 是每个子元素的“身份证”，必须唯一且稳定！没有身份证，Vue就分不清谁是谁，动画直接抓瞎。

第三章：实战！三大经典“团伙”动画场景

光说不练假把式，直接上代码，看看<transition-group>如何大显神通。

场景一：列表排序与增删（“丝滑”的待办事项）

这是我们最常遇到的场景。目标：增删项目时，其他项目要平滑移动。

HTML结构：

<div id="app">
  <button @click="addItem">添加项目</button>
  <button @click="shuffle">随机排序</button>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id" @click="removeItem(item.id)">
      {{ item.message }}
    </li>
  </transition-group>
</div>

CSS样式（精髓在这里！）：

/* 进入和离开的激活状态 */
.list-enter-active, .list-leave-active {
  transition: all 0.8s ease;
}
/* 进入的起点，离开的终点 */
.list-enter-from {
  opacity: 0;
  transform: translateY(30px);
}
.list-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

/* 重点！确保离开的元素脱离文档流，为移动的元素腾出空间 */
.list-leave-active {
  position: absolute;
}

/* 核心魔法：v-move，用于处理位置变化的过渡 */
.list-move {
  transition: transform 0.8s ease;
}

JavaScript逻辑：

const { createApp, ref } = Vue

createApp({
  setup() {
    const items = ref([
      { id: 1, message: '学习Vue动画' },
      { id: 2, message: '写一篇超棒的教程' },
      { id: 3, message: '享受成就感' }
    ])
    let nextId = 4

    const addItem = () => {
      const newItem = { id: nextId++, message: `新项目 ${nextId}` }
      const pos = Math.floor(Math.random() * (items.value.length + 1))
      items.value.splice(pos, 0, newItem)
    }

    const removeItem = (id) => {
      const index = items.value.findIndex(item => item.id === id)
      if (index > -1) {
        items.value.splice(index, 1)
      }
    }

    const shuffle = () => {
      items.value = _.shuffle(items.value) // 假设引入了Lodash库
    }

    return {
      items,
      addItem,
      removeItem,
      shuffle
    }
  }
}).mount('#app')

效果解析：
当你点击删除一个项目时，该项目会向右淡出，而下面的项目会平滑地向上移动填补空缺，这得益于 v-move 类和 position: absolute 的配合。添加和排序也同样流畅！

场景二：同元素切换（“有礼貌”的标签页）

比如一个登录/注册的切换按钮。问题：如果直接切换，两个元素会同时进入和离开，场面很难看。我们需要让旧的先走，新的再来。

这时，我们不用<transition-group>，而是用多个v-if/v-else和单个<transition>，但必须搭配 mode 属性！

HTML结构：

<div id="app">
  <button @click="isLogin = !isLogin">切换模式</button>
  
  <transition name="fade-mode" mode="out-in">
    <div v-if="isLogin" key="login">
      <h3>登录表单</h3>
      <input placeholder="用户名">
    </div>
    <div v-else key="register">
      <h3>注册表单</h3>
      <input placeholder="邮箱">
      <input placeholder="密码">
    </div>
  </transition>
</div>

CSS样式：

.fade-mode-enter-active,
.fade-mode-leave-active {
  transition: opacity 0.5s ease;
}

.fade-mode-enter-from,
.fade-mode-leave-to {
  opacity: 0;
}

JavaScript逻辑：

const { createApp, ref } = Vue

createApp({
  setup() {
    const isLogin = ref(true)
    return {
      isLogin
    }
  }
}).mount('#app')

核心魔法：mode="out-in"
这个模式告诉Vue：“嘿，先执行完离开的动画，等旧的元素完全滚蛋了，再执行进入的动画。”这样就避免了两个元素同时存在的尴尬。你也可以用 in-out（新元素先进入，旧元素再离开），但 out-in 更符合直觉。

注意： 这里必须给每个分支加上唯一的key，否则Vue会认为这是同一个元素在复用，只会触发更新，而不会触发过渡。

第四章：Vue老司机的动画避坑指南

key是关键中的关键： 就像给人脸识别，没有身份证(key)，Vue就脸盲。永远为v-for或v-if/v-else的元素绑定唯一且稳定的key，不要用数组下标！
善用mode管理时序： 多个元素切换时，out-in或in-out模式是你的好帮手，能有效避免动画冲突。
v-move的搭档——position: absolute：在列表过渡中，给离开的元素 (-leave-active) 加上 position: absolute，可以让它脱离文档流，不影响其他兄弟元素的平滑移动。
性能优化： 过渡属性尽量使用 transform 和 opacity，因为这两个属性不会引起浏览器重排，动画性能最佳。避免在过渡中操作 height、margin 等属性。