错峰入场
Stagger Animation
初级通用错峰入场（Stagger Animation）是让一组元素依次错开一点时间开始动画，而不是同时出现。列表、卡片、菜单项一个接一个地淡入，眼睛会顺着从上往下扫一遍，一大块内容也不会同时扑过来。
你可能会说：「通知列表一打开就一下子全冒出来，能不能让它们一条接一条地出来，但又别让人等？」
读之前建议先了解
动手看看一组通知怎么依次出场
要点错峰入场是怎样起作用的？
- 1
错开的是开始时间，不是排队
每个元素的动画本身一样长（比如都是 400 毫秒），只是第二个比第一个晚 50 毫秒开始，第三个再晚 50 毫秒，以此类推，前后的动画是重叠着进行的。容易做错的是让每一项等上一项完全放完再开始：6 项就是 2.4 秒，用户只能看着它们一个个排队进来。
- 2
总时长要封顶
总时长大约等于「间隔 × (条数 − 1) + 单个动画时长」。间隔 80 毫秒、20 条的话，最后一条要将近 2 秒才出现，而用户想点的那条可能正好在最后。常见做法是只让前 6~8 项错开，后面的一起出现；或者条数越多间隔越小，让整组在 1 秒左右放完。间隔一般 30~80 毫秒。
- 3
只在「整组第一次出现」时用
打开面板、首次加载列表时错峰入场有意义；之后滚动加载更多、或者数据刷新，就不该让整个列表再错峰一遍，否则每次刷新都要重新等。新插入的单条数据，单独给它一个入场动画就够了。
容易混淆的地方
错峰入场讲的是「一组元素之间的时间安排」，每个元素用什么动画（淡入、上移、缩放）是另一回事，可以任意搭配。它也不是滚动显现：滚动显现是元素进入视野时才触发，错峰入场是同一时刻要出现的一组元素彼此错开。两者可以结合，比如一屏内同时进入视野的几张卡片再错峰。
什么时候用
适合用
- 打开通知中心或下拉菜单时，让几条内容依次淡入，引导视线从上往下。
- 产品首页第一次加载时，功能卡片一张接一张出现，让页面有节奏感。
- AI 工具一次返回几条建议，逐条错开出现，用户更容易一条条读下去。
不适合用
- 数据表格有几十上百行时，别让每一行错峰入场；整表一起出现，或者只给表格整体一个淡入。
- 用户点「刷新」或翻页后，别让整个列表再错峰一遍；直接替换内容，最多给新增的那几条单独入场。
- 用户急着点某一项（比如快捷菜单）时，别为了好看让后面的选项晚出现；菜单应该瞬间可用。
练一练选一个答案，看看解释
通知中心一次最多显示 20 条通知，你想做错峰入场。哪种设置最合适？
让 AI 帮你做复制给 AI Agent 直接用
请给【一组同时出现的元素，如：通知面板里的通知列表】加上错峰入场。先阅读这个组件和项目里已有的动画写法（CSS 还是动画库）。要求：每项用相同的淡入加轻微上移，动画 200~400 毫秒；相邻两项开始时间错开 30~80 毫秒，动画彼此重叠，不要等上一项放完；只错开前 6~8 项，后面的一起出现，整组在 1 秒左右放完。只在面板首次打开时播放，刷新数据或加载更多时不要整组重播。开启减少动效时直接显示。沿用现有写法，不改无关代码。最后说明 6 条和 20 条时最后一项分别在多少毫秒出现。