[ @sdxc/u/effects ]

transition-behavior

Applies the transition-behavior property on its own; "allow-discrete" lets a discrete property such as display or content-visibility animate across a transition, commonly paired with @starting-style.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { transitionBehavior } from "@sdxc/u/effects";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.transitionBehavior("allow-discrete")`	`css({ transitionBehavior: "allow-discrete" })`

Examples

Basic example

Use transitionBehavior("allow-discrete") to let discrete properties like display transition, so an element can fade in and out as it's shown and hidden. Toggle the popover:

Saved a minute ago.

<div>
	<button type="button" popovertarget="note" mix={[...]}>
		Toggle note
	</button>
	<div
		id="note"
		popover
		mix={[
			transition("opacity, display, overlay", { duration: 300 }),
			transitionBehavior("allow-discrete"),
			opacity(0),
			open(opacity(100)),
			startingStyle(open(opacity(0))),
			...,
		]}
	>
		Saved a minute ago.
	</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.transitionBehavior("allow-discrete"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.transitionBehavior("allow-discrete"))

Signature

u.transitionBehavior(value: TransitionBehaviorValue)