Transitions

Transition components animate their children as they enter or exit. All respect a in attribute and an optional timeout (ms).

Fade

Toggle Fade

Fade content

<me-fade in timeout="500"> <me-paper elevation="4">Fades in/out</me-paper> </me-fade>

Collapse

Toggle Collapse

Collapsed content

Uses CSS grid trick for smooth height animation.

<me-collapse in> <div>Expands and collapses with height animation</div> </me-collapse>

Grow

Toggle Grow

Grow content

<me-grow in> <me-paper elevation="4">Scales + fades in</me-paper> </me-grow>

Zoom

Toggle Zoom

Zoom content

<me-zoom in> <me-paper elevation="4">Scales from zero</me-paper> </me-zoom>

Slide

Slide Down

Slide Up

Slide Left

Slide Right

Slide content

<me-slide in direction="down"> <div>Slides in from above</div> </me-slide> <me-slide in direction="up">...</me-slide> <me-slide in direction="left">...</me-slide> <me-slide in direction="right">...</me-slide>

API (all transitions)

Attribute	Type	Default	Description
`in`	boolean	false	Controls enter/exit. Present = entering, absent = exiting.
`timeout`	number (ms)	300	Transition duration in milliseconds.
`direction` (Slide only)	down \| up \| left \| right	down	Slide direction (entry direction).