StellarUI

<stellar-transition-group>

transition wrapper that animates direct-child inserts, removals, and reorders without changing authored child markup.

Properties

Component

Example

Preview

Add item

Remove first

Shuffle

Alpha release ready

Use transition-group when list changes are part of the experience and abrupt reflow feels noisy.

Docs QA queued

Added, removed, and reordered direct children all share the same FLIP-style timing.

Feedback sweep watching

The children stay normal authored DOM. The component only owns the transition choreography.

Markup

Copy

<stellar-transition-group>
  <article>
    <strong>Alpha release</strong>
    <p>Use transition-group when list changes are part of the experience and abrupt reflow feels noisy.</p>
  </article>
  <article>
    <strong>Docs QA</strong>
    <p>Added, removed, and reordered direct children all share the same FLIP-style timing.</p>
  </article>
  <article>
    <strong>Feedback sweep</strong>
    <p>The children stay normal authored DOM. The component only owns the transition choreography.</p>
  </article>
</stellar-transition-group>

API

Complete props, events, slots, and implementation notes for the shipped transition-group surface.

Props

Prop	Type	Default	Notes
`disable-transitions`	`boolean`	`false`
`ignore-reduced-motion`	`boolean`	`false`

Events

Event	Source	Notes
`content-change`	`stellar-transition-group`	Fires after DOM mutations are observed and before the animation cycle begins. `detail.mutations` contains the raw mutation records.
`transition-end`	`stellar-transition-group`	Fires after all move, enter, and exit animations settle. Also fires when transitions are disabled so callers have a reliable completion hook.

Slots

Slot	Notes
default	Author the direct child elements that should animate when they are inserted, removed, or reordered.

Notes

The public tag is `stellar-transition-group`, matching the component's list-transition wrapper instead of inventing item helper components.
The declarative attribute surface is intentionally small: only `disable-transitions` and `ignore-reduced-motion` belong in markup.
The main host API is property-only: `transitionContainer`, `transitionAnimation`, `isTransitioning`, `transitionComplete()`, and `updateElementPositions()`.
Direct children are the animation targets. Keep the authored list items as normal DOM and mutate that DOM however your app already does.
The default timing comes from the CSS custom property `--duration`, which defines each enter, move, and exit step rather than one overall timeline.