Animate Layout

import { AnimateLayout } from "@plexui/ui/components/Transition";

Use when transitions should affect the layout of surrounding DOM nodes (e.g. expanding/collapsing content).

<AnimateLayout> provides a wrapping element, which className and layout transition properties are applied to.
Avoid box model properties on className, like margin, padding, border. These are additive to the height: 0 empty state and cannot be properly animated.
Avoid box-shadow on className, as it will be visible during the empty state.
Use padding on children (via transitionClassName) instead of margin on the wrapper.

Examples

<AnimateLayout> is an abstraction around <TransitionGroup> that also animates height and width of transitions.

It supports the same props as <Animate> plus layoutEnter, layoutExit, and layoutMove for layout timing.

By default, animates the height of the component as it enters and exits.

Use dimension="width" to animate width.

Wrap accordion content with <AnimateLayout> for smooth height animation.

Which model should I use?

Do you offer an enterprise package or SLAs?

Will I be charged for API usage in the Playground?

Animate width with consistent height. Use transitionClassName to match the button's flex structure.

Prop	Type	Default	Description
`className`	`string`	—	Class applied to the wrapper element
`transitionClassName`	`string`	—	Class applied to the inner TransitionGroup; use for padding on children
`dimension`	`"height" \| "width"`	`"height"`	Which property to animate during transitions
`enter`	`TransitionDefinition`	—	Enter transition (opacity, x, y, scale, etc.)
`exit`	`TransitionDefinition`	—	Exit transition
`initial`	`InitialTransitionDefinition`	—	State before enter
`layoutEnter`	`LayoutTransitionDefinition`	—	Timing for layout enter (duration, delay, timingFunction)
`layoutExit`	`LayoutTransitionDefinition`	—	Timing for layout exit
`layoutMove`	`LayoutTransitionDefinition`	—	Timing for layout move
`hideOverflow`	`boolean`	`false`	Apply overflow: hidden to the wrapper
`itemAnchor`	`"start" \| "end"`	`"start"`	Which side of the container items pin to during enter/exit
`preventInitialTransition`	`boolean`	`true`	When false, children run enter on initial mount
`forceCompositeLayer`	`boolean`	`false`	Applies will-change; use with caution