# XWUIAnimationAnimate

The general-purpose enter/leave wrapper, a port of Ant Motion's `rc-animate`
concept. It wraps one piece of content and plays a named preset when that content appears or
disappears, so a panel, toast or drawer body animates without hand-written keyframes.

## When to use

- A single element that should animate in on mount and out on removal.
- Show/hide state you already track: drive `config.visible` and let the wrapper play the
  matching direction.
- Anywhere a CSS transition is not enough because the element must be removed from the DOM
  afterwards - that is `unmountOnExit`.

For a list of children that should animate one after another, use `XWUIAnimationQueue` or
`XWUIAnimationStagger` instead; for scroll-triggered entrances use `XWUIAnimationScroll`.

## Configuration surface

`data.content` is the wrapped content: a string (set as text) or an `HTMLElement`.

`config`:

- `preset` - the motion, default `fade`. One of `alpha`, `fade`, `left`, `right`, `top`,
  `bottom`, `scale`, `scaleBig`, `scaleX`, `scaleY`, `zoom`, `collapse`. `collapse` measures
  `scrollHeight` so it animates to the content's real height.
- `visible` - show or hide; changing it plays enter or leave.
- `appear` - play the enter animation on first mount.
- `unmountOnExit` - remove the content after the leave animation finishes.
- `duration` (default `450`ms), `easing` (default `cubic-bezier(0.215, 0.61, 0.355, 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

`preset` picks a named motion - here `slide` - and the component plays it once on mount.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A single enter animation driven by the preset name.
```

## Showcase

The same specimen under its own heading, mounted into a dedicated child host so the animation can be replayed without disturbing the page around it.

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

```api
```