Transitions
Animate components as they mount, unmount, and change
Plex UI includes a set of transition primitives for animating component lifecycle — entering, exiting, and layout changes. Pick a high-level component for common cases, or drop down to a low-level primitive for full control.
High-level components
- Animate — Batteries-included enter/exit transitions (opacity, scale, blur, etc.) for fixed-size or absolutely positioned elements.
- Animate Layout — Like Animate, but also animates the container's height or width so surrounding layout reflows smoothly.
- Animate Layout Group — Like Animate Layout, but designed for lists where items enter and exit dynamically.
Low-level primitives
- Transition Group — Controls mount/unmount timing and exposes data attributes for custom CSS transitions. Use when the high-level components don't fit your needs.
- Slot Transition Group — Same as Transition Group but applies data attributes directly to children instead of adding a wrapper element.