[ @sdxc/ui/animations ]

fade

An opacity-only enter/exit transition: sugar over enterExit for a surface that fades in place.

import { fade } from "@sdxc/ui/animations";

Signature

fade(options?: Fade.Options): CSSMixinDescriptor

Returns a css() mixin ready for a host element's mix prop.

Parameter	Type	Description
`options?`	`Fade.Options`	Exit-state opacity, timing, and entered-state selector.

<div id="tooltip-1" popover="hint" mix={fade({ duration: durations.fast })}>
	Copied!
</div>;

The events, constants and types its module publishes, each imported from @sdxc/ui/animations too.

Interface

Member	Type	Description
`opacity?`	`number`	Exit-state opacity (0 to 1). Defaults to `0` — fully transparent when closed.
`duration?`	`number`	Transition duration in milliseconds. Defaults to `durations.normal`.
`easing?`	`string`	A `transition-timing-function` value. Defaults to `easings.standard`.
`when?`	`string`	A selector fragment overriding the default `[open]`/`:popover-open` entered state.