[ @sdxc/u/layout ]
interpolate-size
Opts the element into animating to and from keyword sizes (auto, min-content, max-content, fit-content), so a transition to height: auto or block-size: auto animates across its full duration.
import { interpolateSize } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.interpolateSize() | css({ interpolateSize: "allow-keywords" }) |
Examples
Basic example
Use interpolateSize() to let an element animate to and from a keyword size like auto. Open the disclosure to see its content slide down:
What does interpolate-size do?
It lets sizes like auto and max-content take part in a transition, so this panel grows to its natural height instead of jumping to it.
<details
mix={[
interpolateSize(),
detailsContent(
combine([
bs(0),
overflow("clip"),
transition("block-size, content-visibility", { duration: 300 }),
transitionBehavior("allow-discrete"),
]),
),
open(detailsContent(bs("auto"))),
is(80),
...,
]}
>
<summary>What does interpolate-size do?</summary>
<p mix={[pbs(2), ...]}>
It lets sizes like auto and max-content take part in a transition, so this panel grows to
its natural height instead of jumping to it.
</p>
</details>Animating to a content size
Keyword sizes work on either axis, so a width can animate to max-content. Hover the button to reveal its label:
<button
type="button"
mix={[
interpolateSize(),
is(10),
hover(is("max-content")),
overflow("hidden"),
nowrap(),
transition("inline-size", { duration: 250 }),
...,
]}
>
＋ New post
</button>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.interpolateSize())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.interpolateSize())Signature
u.interpolateSize(value?: InterpolateSizeValue)