# CrossFade

> Swaps keyed content (a list-detail pane, a tab panel) with a cross-fade and a 4px rise.

Source: https://ui.jcsoftdev.com/docs/components/cross-fade

Swaps keyed content (a list-detail pane, a tab panel) with a cross-fade and a 4px rise. The old
content stays mounted on top of the new one until it has faded, out of the layout (so nothing
jumps), hidden from assistive tech and inert. If focus was inside the old content it moves to
the new content. The first render (also server HTML) never animates; reduced motion swaps
without any fade.

## Import

```ts
import { CrossFade } from "@jcsoftdev/ui/motion";
```

## Usage

```tsx
export const RevealOnMount: Story = {
  render: () => (
    <Replay>
      {() => (
        <Reveal>
          <Card className="max-w-sm p-card">Welcome back. Three tasks are waiting for you.</Card>
        </Reveal>
      )}
    </Replay>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `contentKey` * | `Key` |  | Identity of the content. A new key fades the old content out and the new one in. |
| `children` | `ReactNode` |  |  |
| `ref` | `Ref<HTMLDivElement>` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Reveal On Mount](/storybook/?path=/story/motion-motion--reveal-on-mount)
- [Staggered Cards](/storybook/?path=/story/motion-motion--staggered-cards)
- [Cross Fade List Detail](/storybook/?path=/story/motion-motion--cross-fade-list-detail)
- [Count Up In AK Pi](/storybook/?path=/story/motion-motion--count-up-in-ak-pi)
- [Highlight Rows](/storybook/?path=/story/motion-motion--highlight-rows)
- [Cross Fade Swaps Keyed Content](/storybook/?path=/story/tests-motion--cross-fade-swaps-keyed-content)
- [Cross Fade Reduced Motion Swaps At Once](/storybook/?path=/story/tests-motion--cross-fade-reduced-motion-swaps-at-once)
- [Count Up Lands On The Formatted Value](/storybook/?path=/story/tests-motion--count-up-lands-on-the-formatted-value)
- [Count Up Reduced Motion Shows The Final Value](/storybook/?path=/story/tests-motion--count-up-reduced-motion-shows-the-final-value)
- [Reveal And Stagger Reduced Motion Are Static](/storybook/?path=/story/tests-motion--reveal-and-stagger-reduced-motion-are-static)
- [Stagger Keeps Children In The Accessibility Tree](/storybook/?path=/story/tests-motion--stagger-keeps-children-in-the-accessibility-tree)
- [Highlight Row Pulses Only New Rows](/storybook/?path=/story/tests-motion--highlight-row-pulses-only-new-rows)

## Source

`packages/ui/src/motion/cross-fade.tsx`