Animate
Animate components as they mount and unmount
import { Animate } from "@plexui/ui/components/Transition";Use <Animate> for transitions that do not need to affect the layout of surrounding DOM nodes (e.g. fixed size or absolute positioning): nothing → component, component → nothing, or component → another component.
Examples
Overview
<Animate> is an abstraction around <TransitionGroup> for batteries-included transition animations.
enter, exit, and initial props let you define behavior from a set of GPU-accelerated properties: opacity, x, y, scale, rotate, skewX, skewY, and blur.
Fade
Default behavior is a simple fade in/out with ease timing.
Grow
Add transform properties to enter and exit. Cubic timing is applied when transform properties are used.
Continuous transitions
Use initial to differentiate entrance and exit (e.g. emphasized entrance, subtle exit).
Cross fade
Use for icon or page cross-fades (e.g. copy button icon).
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Class applied to the wrapper element |
transitionClassName | string | — | Class applied to the inner TransitionGroup |
enter | TransitionDefinition | — | Styles applied to the enter transition (opacity, x, y, scale, rotate, skewX, skewY, blur, duration, delay, timingFunction) |
exit | TransitionDefinition | — | Styles applied to the exit transition |
initial | InitialTransitionDefinition | — | Styles applied before the enter transition (no duration/delay/timingFunction) |
enterDuration | number | — | Override computed enter duration (ms) |
exitDuration | number | — | Override computed exit duration (ms) |
preventInitialTransition | boolean | true | When false, children run enter on the group's initial mount |
transitionPosition | "absolute" | "static" | "absolute" | Positioning of transition states |
forceCompositeLayer | boolean | false | Applies will-change for compositing; use with caution |