元素退场动画设计：关闭弹窗/通知、移除列表项…

当元素需要从屏幕上消失（关闭模态框、消掉通知、删除列表项、页面转场退出）时，用迪士尼 12 原则配置退场动画的时长、缓动、形变与方向。

适用场景

解决思路

1. Squash & Stretch（挤压拉伸）：退场时缩放到 95-98%，让元素离场时轻微压缩。
2. Anticipation（预备动作）：离场前加一个短暂停顿或微小位移，例如 50ms 的迟疑来提示即将退出。
3. Staging（舞台调度）：朝合乎逻辑的目的地退出——删除的条目向下掉落，被关闭的模态框缩回其来源位置，侧边栏退回它所属的边缘。
4. Straight Ahead vs Pose-to-Pose（逐帧 vs 姿势到姿势）：采用姿势到姿势，定义清晰的「可见→不可见」状态，先规划好退出轨迹。
5. Follow Through & Overlapping（跟随与重叠）：内容先于容器退出，文字比卡片收起提前 50ms 淡出。
6. Slow In/Slow Out（慢入慢出）：退场用 ease-in，起始平缓、离场加速，即 `cubic-bezier(0.4, 0, 1, 1)`。
7. Arcs（弧线）：沿曲线退出而非直线，被关闭的通知沿「向上再向外」的弧线飞出。
8. Secondary Action（次要动作）：把透明度淡出与方向性位移组合使用，纯淡出会让人感觉像报错。
9. Timing（时长）：退场应比入场快 20-30%；快速退场 100-150ms（tooltip、dropdown）；标准退场 150-200ms（modal、toast）；优雅退场 200-300ms（页面转场）。
10. Exaggeration（夸张）：戏剧性离场缩放到 0.9，轻微消失缩放到 0.97。
11. Solid Drawing（立体感）：保持空间逻辑，元素应按它进来的方式退出，或朝它「本该属于」的位置退出。
12. Appeal（吸引力）：退场要确认用户意图，让消失显得果断而不是突兀。
13. 按元素类型套用时长表：Tooltip 100ms / ease-in；Dropdown 150ms / ease-in，向上收起；Toast 150ms / ease-in，滑回来源位置；Modal 200ms / ease-in，内容先退、遮罩后退；Deleted Item 200ms / ease-in，先淡出再收起高度；Page 250ms / ease-in，当前页退出后新页再进入。
14. 用 CSS 动画实现：给元素加 `.exiting { animation: exit 200ms cubic-bezier(0.4, 0, 1, 1) forwards; }`，`@keyframes exit` 从 `opacity: 1; transform: translateY(0) scale(1);` 到 `opacity: 0; transform: translateY(-10px) scale(0.98);`。
15. 列表项移除用折叠模式：先淡出内容（150ms），再收起高度（150ms，在第 100ms 时开始），动画结束后再从 DOM 移除；感知总时长约 250ms。
16. 始终为退场元素加 `will-change: opacity, transform` 以保证动画流畅。