Entrances & Exits · Entering & leaving
Slide out滑出
- directional
- making room
- crisp
The element slides off in one direction while fading, until it is out of frame. The direction it leaves by is often not the one it arrived by: in from the right, out through the bottom tells the whole story of “this is over”.
When to use it
Use it when a row is deleted, a banner expires, or a temporary panel makes way. The travel only needs to clear the container — writing -600px where -100% would do makes the viewer watch dead time.
Parameters
transform: translateY 0→22px · opacity 1→0 · 200ms ease-in
Recipe
Slide out → transform: translateY 0→22px · opacity 1→0 · 200ms ease-in
One sentence for your AI
Slide this content out: transform from translateY(0) to translateY(22px) while opacity goes 1 to 0, over 200ms with ease-in. Animate transform and opacity only — animating height or margin makes everything below jump.