Animate Layout Group
Animate width and height of lists of components as they enter and exit
import { AnimateLayoutGroup } from "@plexui/ui/components/Transition";Give each list item a stable key. Use for lists whose items should affect layout as they enter and exit (e.g. dynamic vertical or horizontal lists).
Examples
Overview
<AnimateLayoutGroup> is like <TransitionGroup> for lists, with batteries-included animations and layout (height/width) support.
Same property set as <Animate> plus layoutEnter, layoutExit, and layoutMove.
Vertical list
(Click to remove)
Horizontal list
(Click to remove)
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Class applied to the wrapper element |
transitionClassName | string | — | Class applied to the inner TransitionGroup |
dimension | "height" | "width" | "height" | Which property to animate |
enter | TransitionDefinition | — | Enter transition |
exit | TransitionDefinition | — | Exit transition |
initial | InitialTransitionDefinition | — | State before enter |
layoutEnter | LayoutTransitionDefinition | — | Layout enter timing |
layoutExit | LayoutTransitionDefinition | — | Layout exit timing |
layoutMove | LayoutTransitionDefinition | — | Layout move timing |
hideOverflow | boolean | false | Apply overflow: hidden |
itemAnchor | "start" | "end" | "start" | Which side items pin to |
preventInitialTransition | boolean | true | When false, run enter on initial mount |
forceCompositeLayer | boolean | false | Applies will-change; use with caution |