入场与退场 · 出现和消失
弹出退出Pop out
- 先鼓一下
- 主动
- 有弹性
元素先微微鼓一下(像吸一口气),再快速缩掉消失。就那一下反向的预备,让消失显得是它自己走的,而不是被硬切掉的 —— 这也是它和缩小退出唯一的差别。
什么时候用它
被用户主动取消的东西用它 —— 关掉一个浮层、撤销一次操作、收走一个通知。反过来,系统自动清理、或者用户没预期的东西,别用:那一鼓会显得太活泼。
参数
transform: scale 1→1.04→0.72 · opacity 1→0 · 240ms ease-in
配方
弹出退出 → transform: scale 1→1.04→0.72 · opacity 1→0 · 240ms ease-in
给 AI 的一句话
做一个弹出退出:transform 先 scale 到 1.04(约在 0–25%),再一路缩到 0.72,opacity 从 1 到 0,整段 240ms 用 ease-in。前面那一鼓要短 —— 超过 80ms 就不再是「吸一口气」,而变成了一次停顿。