列表/网格/表格项排序、筛选…

当 UI 中的列表、网格、表格或集合项需要做排序、筛选、加载状态动画时，可用这套动作原则和参数让变化平滑、有序、有高级感。

适用场景

解决思路

1. 挤压与伸展：列表项被抓取用于重排时轻微压缩；网格项在筛选后扩展填充空间时可拉伸。
2. 预期：列表重排前让项目短暂压缩；筛选移除项目前让其轻微缩小，为即将发生的变化做准备。
3. 舞台感：拖拽中的项目通过 z-index + shadow 抬到其他项上方；筛选结果高亮，其他项淡出，把视线引导到相关项目。
4. 直入与逐帧：定义 entering、resting、reordering、exiting 状态；列表动画采用 pose-to-pose 以获得可预测、可控的效果。
5. 跟随与重叠动作：项目入场做 stagger：第一项先动，其他项跟随（30-50ms delay）；项目内部内容滞后于项目容器。
6. 缓入缓出：项目进入用 ease-out；项目退出用 ease-in；重排用 ease-in-out；错峰缓动应像波浪，而不是机械运动。
7. 弧线：重排项目应沿曲线路径而非直线移动；为网格洗牌增加个性和有机感。
8. 次要动作：项目移动（主）时显示占位符（次），其他项目位移（第三）；协调整个 ensemble。
9. 计时：Stagger delay 为每项 30-75ms；Item enter 为 200-300ms；Item exit 为 150-200ms；Reorder 为 250-350ms；Filter shuffle 为 300-400ms；Max total stagger 为 500-800ms。
10. 夸张：筛选转场可夸张到移除前把项目缩放到 0；新项目可略微 overshoot 位置；让排序变化可见。
11. 扎实绘图：动画期间保持一致间距；Grid gaps 保持均匀；项目比例在 transform 期间保持稳定。
12. 吸引力：平滑的列表动画有高级感；突兀的重排像坏掉；错峰入场自然引导注意力；用户会注意到质量。
13. CSS 实现：为 `.list-item` 设置 `animation: itemEnter 250ms ease-out backwards;`；用 `.list-item:nth-child(1) { animation-delay: 0ms; }`、`.list-item:nth-child(2) { animation-delay: 50ms; }`、`.list-item:nth-child(3) { animation-delay: 100ms; }` 继续该模式；定义 `@keyframes itemEnter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }`；为 `.grid-item` 设置 `transition: transform 300ms ease-in-out, opacity 200ms ease-out;`。
14. 使用 `transform`：用 translate、scale。
15. 使用 `opacity`：用于进入/退出。
16. 使用 `animation-delay`：用于 stagger。
17. 使用 `grid-template`：用于布局变化（layout shifts）。
18. 使用 `order`：用于 reordering。

适用边界 · 注意事项

• 用户偏好减少动态效果或可访问性要求禁用动画时（如 `prefers-reduced-motion`），不要使用这些动画。
• 列表/网格项数量很大（数百/数千项）或更新频率很高（实时流、快速连续筛选）时，不要逐项 stagger 或使用较长动画，否则总时长过长且交互延迟。
• 需要严格即时反馈、零延迟的操作（例如键盘快速导航、拖拽实时跟手）中，不要加入预期压缩、弧线、夸张 overshoot 等会阻碍直接操作的动画。