# XWUIAnimationQueue

Serial enter/leave for a list of keyed children, the port of Ant Motion's
`QueueAnim`. Each item animates with the same preset, offset from the one before it by
`interval`, which is what makes a list arrive as a sequence rather than a block.

## When to use

- A list, menu or card grid that should build up on first paint.
- Items entering and leaving over time, where the leave order should mirror the enter order
  (`leaveReverse`).
- Any place a single CSS transition cannot express per-child delay.

`XWUIAnimationStagger` covers the same idea with a smaller, explicit API (`preset` + `stagger`);
reach for this one when you want the Ant Motion `type` vocabulary and leave-order control.

## Configuration surface

`data.items` is an array of `{ key, content }`; `key` is what identity tracking is based on,
so keep it stable across updates.

`config`:

- `type` - preset, default `right`. Accepts the shared preset names plus the Ant Motion
  aliases `alpha`, `left`, `right`, `top`, `bottom`, `scale`, `scaleBig`, `scaleX`, `scaleY`.
- `interval` - milliseconds between consecutive children, default `100`.
- `delay` - milliseconds before the first child, default `0`.
- `duration` - per-child duration, default `450`ms.
- `appear` - animate on first mount.
- `leaveReverse` - play leave in reverse order.
- `easing` (default `cubic-bezier(0.165, 0.84, 0.44, 1)`), `className`.

### Family behaviour

Every component in `power/animation` is CSS plus the Web Animations API - no
`rc-*` React packages and no animation library. Two consequences worth knowing
before you design with them:

- `prefers-reduced-motion: reduce` is honoured, not decorated: presets jump
  straight to their end state, banner autoplay never starts, per-character text
  motion is skipped, and scroll-linked motion freezes. The content is always
  fully readable.
- A `content` string is written with `textContent`, never as HTML. Pass an
  `HTMLElement` when you need markup, and build that element yourself so the
  escaping decision stays where the data is.

## Basic Usage

A keyed list arriving one item at a time: `interval` sets the gap between consecutive children.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A keyed list entering in sequence.
```

## Showcase

The same queued list under its own heading, mounted into a dedicated child host.

```example
file: examples/Showcase.ts
html: examples/Showcase.html
title: Showcase
description: The queued list replayed in an isolated host.
```

```api
```