反模式 · 动效 · 高
一个时长走天下
一个时长走天下指所有过渡共用同一个时长——通常 300ms——无论动的东西多大、多远。
症状
样式表里所有 transition 与 animation 共用同一个时长值。
为什么会这样
单一时长写起来省事，在代码评审里也显得统一。但这也是把动效当附属品后补上去时的结果。
规则
三档时长，按动的东西分：150ms、250ms、400ms。
- 颜色、透明度与小型控件反馈用 100-150ms。
- 元素进场、离场、原地改变尺寸用 200-300ms。
- 300-400ms 只留给长距离移动的大表面。
一个时长走天下是什么？
时长应该跟随距离与尺寸：小控件的颜色变化 100-150ms，卡片进场 200-300ms，整块面板滑出 300-400ms。当一切都是 300ms，小交互显得迟钝，大动作显得突兀。三条时长做成 token 阶梯，几乎能覆盖所有界面。
修复 Prompt
贴在你现有 Prompt 之后，把这类毛病从结果里剥掉。