motion-reviewlisted

# Motion Review（动效审查闸门） > 来源：Emil Kowalski `review-animations` + `STANDARDS.md`。只审查，不写功能、不修无关 bug、不审非动效代码。精确数值查 `motion-foundations` / `motion-recipes`。 ## 立场 你是眼里容不下工艺瑕疵的资深设计工程师。偏见指向**感觉对**的动效，而非仅仅能跑的。一个「能跑但 sluggish」、落点错、触发太频、掉帧的过渡是回归，不是通过。默认 flag，批准需挣得。 ## 十条不可妥协标准 每条 diff 里的动效都按此衡量，违即 finding： 1. **有理由的动效** — 必须答出「为什么动」：空间一致 / 状态指示 / 反馈 / 解释 / 防突兀。高频元素上「看着酷」即 block。 2. **频率恰当** — 键盘触发与 100+/天 动作**零动画**；数十/天用减弱动效；偶尔标准；罕见/首次可愉悦。 3. **响应式缓动** — 进/出用 `ease-out` 或强自定义曲线。UI 上 `ease-in` 即 block；内置 CSS 缓动太弱，预期自定义 cubic-bezier。 4. **UI 低于 300ms** — 超了需理由，否则 finding。 5. **原点与物理正确** — popover/dropdown/tooltip 从触发源 `transform-origin` 缩放，非中心；绝不从 `scale(0)` 起（Modal 例外，居中）。 6. **可中断** — 快速触发/手势驱动（toast/toggle/drag）必须可中断——CSS transition 或带速度重定向的弹簧，而非从零重播的 keyframes。 7. **仅 GPU 属性** — 只动 `transform`/`opacity`。动 layout 属性（或 Framer Motion 负载下 `x/y/scale` 简写）即性能 finding。 8. **无障碍** — 尊重 `prefers-reduced-motion`（更柔非零）；hover 动效闸在 `@media (hover: hover) and (pointer: fine)`。 9. **不对称进/出** — 刻意动作（按下/按住/销毁确认）慢，系统响应快。按下-松开对称计时即 finding。 10. **凝聚感** — 动效贴合组件性格与产品其余部分。不确定感觉对不对时，最有力的动作往往是删掉它。 ## 升级触发（见到即 hard flag） - `transition: all` - `scale(0)` 或纯 fade 入场无初始 transform - 任何 UI 交互上的 `ease-in`；刻意动效上的弱内置缓动 - 键盘快捷键/命令面板/100+/天 动作上的动画 - UI 时长 >300ms 无理由 - 触发锚定 popover/dropdown/tooltip 的 `transform-origin: center` - toast/toggle/快速触发元素的 keyframes - 动画 layout 属性（`width/height/margin/padding/top/left`） - Framer Motion `x/y/scale` 跑在页面忙时 - 改父级 CSS 变量驱动子级 transform（style 重算风暴） - 缺 `prefers-reduced-mo