- 首次进入的列表、卡片网格、菜单项：想让视线按顺序扫一遍。
- 项目少（3–8 个）、彼此同级，顺序本身有意义。
动效 · 节奏与反馈
错峰出现Stagger
用间隔、错峰项数和总时长封顶控制错峰，只在首次进入时播放首屏几项，减少动效时直接显示。
先播一次通知列表，看错峰什么时候变成等待
错峰的好处是让视线从上往下走一遍；坏处是每多一项就多等一截。用这个列表把两面都看一遍。
通知列表错峰台
默认是“20 条通知、每条错开 80ms 全部错峰”。先点「重播进场」看列表怎样一条条出来，再改设置对照；没出现的行会用骨架占着位置。
- 订订单你买的保温杯已发货3 分钟前
- 小小周评论了你的周报：数据很清楚6 分钟前
- 日日历15:00 产品评审即将开始9 分钟前
- 阿阿青给你的设计稿点了赞12 分钟前
- 系系统本周存储空间已用 82%2 小时前
- 老老马把你加入了“发布排期”群3 小时前
- 账账单10 月账单已生成4 小时前
- 小小周@了你：明天的接口能联调吗5 小时前
- 安安全新设备登录：MacBook Air6 小时前
- 阿阿青分享了文件“首页改版 v3”7 小时前
- 订订单你买的保温杯已发货8 小时前
- 小小周评论了你的周报：数据很清楚9 小时前
- 日日历15:00 产品评审即将开始2 天前
- 阿阿青给你的设计稿点了赞2 天前
- 系系统本周存储空间已用 82%2 天前
- 老老马把你加入了“发布排期”群2 天前
- 账账单10 月账单已生成2 天前
- 小小周@了你：明天的接口能联调吗2 天前
- 安安全新设备登录：MacBook Air3 天前
- 阿阿青分享了文件“首页改版 v3”3 天前
虚线以下在首屏之外，用户要滚动才看得到
最后一项在 1720ms 出现
(20 − 1) × 80ms + 200ms = 1720ms最后一项要 1720ms 才出现，超过 600ms，列表底部一直是“还在等…”的骨架。原因：20 项全错峰，每项再等 80ms。下一步：勾「只错峰前 6 项」或「封顶总时长 400ms」，再点「重播进场」。
从刚才的操作里提炼
- 总时长 = (项数 − 1) × 间隔 + 单项时长。20 项 × 80ms 就是 1720ms，时间轴上的最后一个刻度远远跑进红区。
- 只错峰首屏几项。用户一眼能看到的大约 6 条，错峰它们就够了；虚线以下的行直接显示，反正要滚动才看得到。
- 给总时长封顶（约 400ms）。封顶会自动压缩间隔；项数多时间隔会被压到几乎同时，所以封顶和“只错峰前 6 项”最好一起用，间隔落在 30–60ms。
- 重复进入不重播。切筛选、翻页、返回列表时再播一遍，用户每次都要重新等；错峰只属于第一次进入。
- 减少动效直接显示。勾上后列表一次到位、顺序不变，没有任何内容依赖错峰才出现。
什么时候用
- 搜索结果、筛选结果、无限滚动加载的新一页：用户急着看内容。
- 表格、长列表、每次刷新都会出现的数据：重复等待只会烦人。
怎么用：把三个数字和一个时机说清
间隔、错峰项数、总时长封顶，再加上“只在首次进入播放”。
- 跟 AI 说：“通知列表首次进入时依次淡入上移：每项间隔 40ms、单项 200ms，只对首屏前 6 项错峰，其余直接显示，总时长封顶 400ms；筛选、翻页、返回列表时不重播；减少动效时全部直接显示。”
- 看报告：认得出
stagger、staggerChildren、animation-delay: calc(var(--i) * 40ms)这类写法；看到 delay 随索引无限增长、没有上限就要追问。 - 上手验收：把列表塞到 30 条，看最后一条是否仍在 400ms 内到齐；切一次筛选，看是否又从头播；打开系统“减少动态效果”，看列表是否一次到位。
正反例：同一个通知列表，只改错峰范围
(20 − 1) × 80 + 200 = 1720ms最后一条快两秒才出现；每次切“未读”又从头播一遍，用户在一个简单的筛选上反复等待。
(6 − 1) × 40 + 200 = 400ms首屏在 0.4 秒内依次就位，视线顺着扫一遍；首屏外直接显示，切筛选直接换结果。
快速自测
商品搜索结果页有 24 张卡片，AI 让每张卡片按 60ms 依次淡入，每次改搜索词都重新播。你应该怎么要求？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。