[ @sdxc/ui/animations ]

slide

A fade paired with a directional offset, entering from just off one edge of its resting position and exiting back toward it.

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

Signature

slide(options: Slide.Options): CSSMixinDescriptor

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

Parameter	Type	Description
`options`	`Slide.Options`	Which edge to travel from, the offset distance, opacity, timing, and entered-state selector.

<dialog id="cart-drawer" mix={slide({ from: "right", duration: durations.slow })}>
	...
</dialog>;

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

Interface

Member	Type	Description
`from`	`From`
`distance?`	`string`	How far the exit state is offset along that edge. Defaults to `"0.5rem"`.
`opacity?`	`number`	Exit-state opacity (0 to 1). Defaults to `0`.
`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.

Type

Which edge the host travels in from (and back out toward on exit).

type Slide.From = "top" | "right" | "bottom" | "left"