- 待办、购物车、文件列表的增删和排序。
- 筛选结果变化、卡片网格重排、拖拽排序松手后的落位。
- 折叠面板、FAQ 展开时，把下面的内容推开。
动效 · 页面与滚动
布局动画Layout Animation
增删、排序、展开收起时让周围元素用 transform 平滑让位，用户才追得上东西去了哪；连续操作不错位，减少动效时直接到位。
先在待办清单里删一删、排一排
盯住“你的那一项 ★”：开着布局动画排序时它会滑过去，关掉后它直接瞬移。再试试删除、新增、展开和连续快速操作。
待办清单 · 盯住 ★ 那一行
列表里有一项是“你的那一项 ★”。试试新增、删除、排序、展开，先用眼睛判断 ★ 去了哪，再看右边的读数对不对；然后关掉「布局动画」再做一遍。
- 追踪目标
- ★ 现在是第 5 行
- 上一次操作
- 还没操作
- 这次布局变化怎么播
- 平滑让位 · transform 240ms
- 动的属性
- 只有 transform 和 opacity，不逐帧改 top / height
第 1 步：点「按优先级排序」，眼睛盯住 ★ 那一行，看它滑到了哪里，再对照读数。
从刚才的操作里提炼
你在清单里看到的，就是验收布局动画的五个检查点。
- 让位是为了追踪：开着动画排序，★ 一路滑到新位置；关掉后它同一帧瞬移，只能重新扫一遍列表才找到。
- 四种情形都要覆盖：新增（其他行下移）、删除（先淡出再补位）、排序（每行移到新位置）、展开收起（下面的行被推开再滑回）。
- 只动 transform：先记旧位置、再算位移、用 transform 反向贴回去、过渡到 0——AI 报告里叫 FLIP，或 Motion 的 layout。逐帧改 top / height 会让浏览器每帧重排，列表一长就卡；展开也可以用 grid-template-rows 过渡，但它同样每帧重排，只适合小区域。
- 连续操作可中断不乱：「压力测试」在 200ms 内连换 3 次排序，每次都从行此刻的位置出发，最后落点正确；连删几行也不会叠影。
- 减动效直接到位：勾上「减少动效」，所有变化立即完成，★ 的位置仍由标记和读数告诉你。
什么时候用、什么时候别用
判断标准：用户需不需要知道“东西去哪了”。
- 成百上千行的长表格整体刷新：直接换数据，别让每行都飞。
- 实时刷新的数据（行情、日志）：频繁让位会让人晕，也拖性能。
- 只是想“好看”，但用户根本不用追踪位置的地方。
怎么跟 AI 说、怎么验收
你不用自己写 FLIP，但要点名四种情形、实现方式和中断要求，再亲手连点验证。
“待办列表删除一项时，该项淡出并收起，下面的行在 200ms 内平滑上移；新增时从顶部插入、其他行下移；排序时每行移动到新位置；动画只用 transform 实现（FLIP 或 Motion 的 layout），连续快速删除不错位；减少动效时直接到位。”
- 追一个目标：在列表里挑一行记住它，点排序，眼睛能不能一路跟到它的新位置。
- 连点：快速连删 3 行、来回切两次排序，行不能叠在一起或停在半路。
- 看报告里的属性：AI 说“用 transform / FLIP / layout”是对的；看到逐帧改 top、height、margin 要追问。
- 手机降速：在开发者工具里开 4 倍 CPU 降速再操作，仍然顺滑。
- 减少动效：系统打开“减少动态效果”后，所有变化直接到位，功能不缺。
正反例：同一个待办列表，只差一句需求
目标都是“删除顺滑”，差别在有没有说清“周围的行怎么让位、用什么属性、连点怎么办”。
“删除时该项淡出，下面的行 200ms 平滑上移；新增从顶部插入、其他行下移；排序时每行移到新位置；只用 transform（FLIP 或 Motion 的 layout），连续快速操作不错位；减少动效时直接到位。”
用户删错能立刻看出来，排序后一眼跟住自己的那一项；手机上也不卡。
“删除的时候顺滑一点。”
AI 可能只给被删的行加淡出，其他行还是瞬间跳；或者逐帧改 height / top，列表一长就掉帧，连点两下还会叠影错位。
快速自测
购物车删除商品后，下面的商品“唰”地跳上来，用户总以为删错了。AI 提了三个方案，你选哪个？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。