Vue基础教程（149）过渡和动画效果之列表过渡中的交错过渡：别让列表动得像军训！Vue交错过渡让你的应用“丝滑入场”

朋友们，不知道你们有没有见过那种“呆板”的列表动画？就是整个列表“唰”地一下齐刷刷地出现，整齐得跟军训报数似的。说实话，这种效果在2023年的今天，真的有点out了！

想象一下现实生活中的场景：一群人依次通过旋转门，多米诺骨牌接连倒下，或者钢琴键被依次按下……这种错落有致的节奏感，才是自然的美感啊！

好消息是，用Vue实现这种“交错过渡”（Staggered Transitions）效果，其实比你想象中简单多了！今天，就让我带你彻底玩转这个能让你的应用瞬间提升逼格的技巧。

一、什么是交错过渡？为什么需要它？

交错过渡，说白了就是让一组元素不是同时动起来，而是像接龙一样，一个接一个地，带着微小的时间差依次执行动画。

为什么要这么麻烦呢？让我给你举个栗子🌰：

假如你有一个社交App的消息列表，如果所有消息同时弹出，用户的眼睛根本不知道往哪看，体验很“炸”。但如果让消息一条接一条地滑入，用户的视线就能自然地跟随动画移动，阅读体验瞬间提升好几个档次！

从用户体验的角度看，交错过渡有三大杀手级优势：

1. 引导视线：像导游一样，自然引导用户关注点
2. 减轻认知负荷：避免信息同时涌入造成的不适
3. 提升感知性能：即使加载时间相同，渐进式入场会让用户感觉“更快”

二、TransitionGroup：Vue给我们的神器

在深入交错过渡之前，得先聊聊Vue的内置组件——TransitionGroup。

很多Vue新手只知道Transition，不知道TransitionGroup。简单来说：

• Transition：用于单个元素的过渡动画
• TransitionGroup：专门为列表元素设计的，能处理列表中元素的进入、离开和顺序变化

TransitionGroup的魔法在于，它会为每个子元素自动注入特定的CSS类名，就像这样：

/* 进入时的状态 */
.list-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

/* 进入的激活状态 */
.list-enter-active {
  transition: all 0.5s ease;
}

/* 进入的结束状态 */
.list-enter-to {
  opacity: 1;
  transform: translateY(0);
}

看到这里你可能要问：这和普通过渡有什么区别？区别大了！TransitionGroup会跟踪每个元素的位置，即使在动画过程中元素被重新排序，它也能智能地处理移动动画。

三、手把手实现基础交错过渡

理论说再多不如实际操练，来，上代码！

场景设定：一个简单的待办事项列表

我们先从最简单的CSS方式实现交错过渡：

<template>
  <div class="todo-app">
    <button @click="addItem">添加新任务</button>
    
    <T