基础
动效
动效用来揭示层级和给反馈,不是装饰。只动 opacity 和 transform;不弹跳;减少动效时一次性全部静止。点「播放」看每一档。
速度
--motion-quick · 140ms
状态变化:离开 hover、颜色、淡入淡出、完成的勾
--motion-panel · 180ms
右侧面板滑入
--motion-sheet · 200ms
sheet 从 dock 升起(ease-out-expo)
--motion-medium · 220ms
小型进入:行、筛选、进度、开关滑块
--motion-sheet-out · 120ms
sheet 收回
规则
- hover:进入立即变,离开 140ms 淡回。
- 菜单、popover、tooltip 从锚点方向 0.96 → 1 长出来;对话框和 sheet 升起。
- tooltip 关掉后 300ms 内移到下一个按钮,立即出现、原地换字。
- 折叠只淡入 + 小位移,不做高度动画。
- 进行中的按钮宽度不跳;完成后图标变勾 1 秒。