Slot Transition Group

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

<SlotTransitionGroup> behaves like <TransitionGroup> but applies transition data attributes directly to the child elements instead of adding a wrapper. Prefer <Animate>, <AnimateLayout>, or <AnimateLayoutGroup> first. Use when you need transition state without an extra wrapper node. Children must have a stable key.

Examples

Overview

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

Transition states

Attributes are applied on the child; no default styles.

Attribute	Description
`data-entering`	Enter transition staged; applied for full entrance.
`data-entering-active`	Enter transition active.
`data-exiting`	Exit transition staged; applied for full exit.
`data-exiting-active`	Exit transition active.
`data-interrupted`	Switched to the opposite transition before completion.

Initial mount

By default, children do not transition on the group's initial mount. Use preventInitialTransition= to allow it.

CSS example

Apply styles to the child using the data attributes:

.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
`enterDuration`	`number`	—	Duration in ms for enter transition
`exitDuration`	`number`	—	Duration in ms for exit transition
`preventInitialTransition`	`boolean`	`true`	When false, children transition on the group's initial mount