easeul

Radix UIKeyframes

Collapsible

The only case opacity cannot carry, because the layout below has to move. A second keyframe track collapses a grid row from 1fr to 0fr, so nothing has to measure the panel and nothing depends on a Chromium-only property.

Radix UI documentation1.6.7

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

withoutno attribute
with easefuldata-motion="collapse"
host writes

data-state="open" | "closed"

easeful matches

[data-motion~="collapse"][data-state="closed"]

what runs

animation: motion-exit, motion-collapse-exit

you write

<Collapsible.Content data-motion="collapse" />

Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

  1. Collapsible.Root
  2. Collapsible.Trigger
  3. Collapsible.Contentdata-motion="collapse"

Source

apps/docs/components/demos/radix/collapsible.tsx
20 lines
"use client"

import { Collapsible } from "radix-ui"
import type { DemoProps } from "@/components/demos/props"

export function RadixCollapsible({ motion }: DemoProps) {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger className="btn">Toggle panel</Collapsible.Trigger>
      <Collapsible.Content data-motion={motion}>
        <div className="panel" style={{ marginTop: 12 }}>
          <p className="panel__body">
            One grid row, animated from 1fr to 0fr. Nothing measures the panel, so nothing has to
            be handed back a pixel value.
          </p>
        </div>
      </Collapsible.Content>
    </Collapsible.Root>
  )
}
The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.