入场与退场 · 出现和消失
滑出Slide out
- 有方向
- 让位
- 干脆
元素朝一个方向滑走，同时淡掉，最后离开画面。它出去的方向常常和进来时不一样 —— 从右边进来、往下走掉，这一进一出就讲完了一个「这件事结束了」的句子。
什么时候用它
列表项被删除、提示条读完自动消失、临时面板让位时用它。滑出的距离只要够离开容器就行（把 -100% 写成 -600px 会白等一段空跑）。
参数
transform: translateY 0→22px · opacity 1→0 · 200ms ease-in
配方
滑出 → transform: translateY 0→22px · opacity 1→0 · 200ms ease-in
给 AI 的一句话
让这块内容滑出：transform 从 translateY(0) 到 translateY(22px)，同时 opacity 从 1 到 0，共 200ms 用 ease-in。只动 transform 和 opacity，别动 height 或 margin —— 那会让下面的内容跟着跳。