Transition Group

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

<TransitionGroup> controls when children mount and unmount and wraps them in a container with stateful data attributes for enter/exit transitions. Prefer <Animate>, <AnimateLayout>, or <AnimateLayoutGroup>. Use <TransitionGroup> only for custom or very complex transitions. Children must have a stable key.

Examples

Overview

Timing is driven by enterDuration and exitDuration. No default styles are applied; use the data attributes below in your CSS.

Transition states

No default styles are applied. Use these data attributes in your CSS:

Attribute	Description
`data-entering`	Enter transition is about to start; stays for the full entrance.
`data-entering-active`	Enter transition is active.
`data-exiting`	Exit transition is about to start; stays for the full exit.
`data-exiting-active`	Exit transition is active.
`data-interrupted`	Transition was interrupted (e.g. exit then re-mounted before exit finished).

Initial mount

By default, children do not run enter/exit when <TransitionGroup> first mounts. Use preventInitialTransition= to allow initial enter.

CSS example

.Example {
  &[data-entering] { opacity: 0; }
  &[data-exiting] { opacity: 1; }
  &[data-entering-active],
  &[data-exiting][data-interrupted] {
    opacity: 1;
    box-shadow: 0 0 0 5px green;
    transition: opacity 2s ease, box-shadow 2s ease;
  }
  &[data-exiting-active],
  &[data-entering][data-interrupted] {
    opacity: 0;
    box-shadow: 0 0 0 5px red;
    transition: opacity 1s ease, box-shadow 1s ease;
  }
}

Reference

Prop	Type	Default	Description
`className`	`string`	—	Class applied to the wrapper (receives transition data attributes)
`enterDuration`	`number`	—	Duration in ms for enter transition
`exitDuration`	`number`	—	Duration in ms for exit transition
`preventInitialTransition`	`boolean`	`true`	When false, children run enter when the group first mounts