[ @sdxc/ui/animations ]
enterExit
Composes a CSS-only enter/exit transition mixin whose @starting-style block animates the first entered paint from the exit values.
import { enterExit } from "@sdxc/ui/animations";Usage
Composes a CSS-only enter/exit transition mixin whose @starting-style
block animates the first entered paint from the exit values. Owns the
host's transition, so apply exactly one animation factory per host.
Signature
enterExit(options?: EnterExit.Options): CSSMixinDescriptorReturns a css() mixin ready for a host element's mix prop.
Parameters
| Parameter | Type | Description |
|---|---|---|
options? | EnterExit.Options | Which axes to animate, the timing, and the entered-state selector. |
Examples
<div id="filters" popover="auto" mix={enterExit({ opacity: 0, scale: 0.95, duration: 150 })}>
...
</div>;<div data-visible mix={enterExit({ opacity: 0, when: "[data-visible]" })}>...</div>;Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/animations too.
Interface
EnterExit.Options
Every field is the host's closed/exit-state value for one CSS property;
the entered state is always that property's reset (1 for opacity,
none for scale/translate). Omitted fields leave their property as is.
| Member | Type | Description |
|---|---|---|
opacity? | number | Exit-state opacity, 0 to 1. |
scale? | number | Exit-state scale factor, e.g. 0.95. |
translate? | string | Exit-state translate value, e.g. "0 0.5rem". |
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 relative to the host (e.g. "[data-visible]") marking the entered state, replacing the [open]/:popover-open default for hosts that carry their own entered-state attribute. |