responsive

startingStyle

Wraps utilities in @starting-style, defining the values a transition animates from — for entry fade/scale-ins on dialogs, tooltips, popovers, and other elements starting display: none or in the top layer.

import { startingStyle } from "@sdxc/u/responsive";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.startingStyle(u.opacity(0))`	`css({ "@starting-style": { opacity: "0" } })`

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.startingStyle(u.opacity("2.75rem"))

Applying on a state

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

u.hover(u.startingStyle(u.opacity(0)))

Signature

u.startingStyle(input: UtilityInput<Node>)