[ @sdxc/ui/animations ]
enterExit
Composes a CSS-only enter/exit transition mixin.
import { enterExit } from "@sdxc/ui/animations";Usage
Composes a CSS-only enter/exit transition mixin: @starting-style paints
the first entered frame from the entry values, and closing transitions to
the exit values on the exit timing. Every change is a transition, so a
reversal mid-flight retargets smoothly. 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 | Entry and exit values, their 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>;<dialog mix={enterExit({ translate: "100% 0", exit: { translate: "1rem 0", opacity: 0, blur: 4 } })}>...</dialog>;Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/animations too.
EnterExit.Values
The off-stage value of each animated CSS property; the entered state is
always that property's reset (1 for opacity, none for scale,
translate and filter). Omitted fields leave their property as is.
| Member | Type | Description |
|---|---|---|
opacity? | number | Off-stage opacity, 0 to 1. |
scale? | number | Off-stage scale factor, e.g. 0.95. |
translate? | string | Off-stage translate value, e.g. "0 0.5rem". |
blur? | number | Off-stage filter: blur() radius in pixels, e.g. 4. |
EnterExit.Options
The top-level values are where the host enters from. exit overrides
any of them for where it leaves to, and a property only exit names
enters from its reset, so a surface can blur away without blurring in.
| Member | Type | Description |
|---|---|---|
exit? | Values | Where the host leaves to, per property; each omitted field reuses its entry value. |
duration? | number | Entry duration in milliseconds. Defaults to durations.normal. |
easing? | string | A transition-timing-function value for the entry. Defaults to easings.standard. |
exitDuration? | number | Exit duration in milliseconds. Defaults to three quarters of duration. |
exitEasing? | string | A transition-timing-function value for the exit. Defaults to easing. |
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. |