zidanemotion/presence
import { … } from 'zidane-ui'ui/src/motion/presence.ts
Functions#
readDurationVarFunction#
A duration custom property (200ms, 0.2s) in milliseconds; 0 when unset.
function readDurationVar(name: string, root?: HTMLElement): numberParameters
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | The custom property, such as | |
| root? | HTMLElement | document.documentElement | The element to read it from. Defaults to |
Returns
numberreadExitMsFunction#
How long a CSS exit plays: the longer of exit (transform) and
fade-out (opacity). 0 under off; the brief fade under reduced.
What an exitMs waiting on an exit / fade-out animation passes.
function readExitMs(): numberReturns
numberreadMenuExitMsFunction#
How long a menu's close plays (menu-exit, opacity and transform alike): what a menu's exitMs passes.
function readMenuExitMs(): numberReturns
numberreadMotionMsFunction#
A named motion's CSS duration (--zg-motion-<name>-duration, motion/springs.ts) in ms.
function readMotionMs(name: string): numberParameters
| Name | Type | Description |
|---|---|---|
| name | string | The motion name, such as |
Returns
numberreadPanelMsFunction#
The panel open / close duration token (zeroed by reduced / off motion).
function readPanelMs(): numberReturns
numbertransitionStateFunction#
open / closed for [data-state] transitions: everything but open shows the closed look.
function transitionState(state: PresenceState): 'open' | 'closed'Parameters
| Name | Type | Description |
|---|---|---|
| state | PresenceState | The phase from |
Returns
'open' | 'closed'usePresenceFunction#
Keeps a node mounted around a CSS transition. It is mounted on the render that opens it,
then goes entering, open, closing for exitMs and closed. A zero exitMs closes at
once, as reduced and off motion want.
function usePresence(open: boolean, options?: PresenceOptions): PresenceParameters
| Name | Type | Default | Description |
|---|---|---|---|
| open | boolean | Whether the node should be open. | |
| options? | PresenceOptions | {} | Whether to mount closed and transition in ( |
Returns
useScrollLockFunction#
Locks page scroll while active (menus, dialogs). Counted: with layers
stacked, the page stays locked until the last one lets go, whatever order
they close in, and gets back the styles it had before the first.
function useScrollLock(active: boolean): voidParameters
| Name | Type | Description |
|---|---|---|
| active | boolean | Whether to lock the page scroll. |
Interfaces#
PresenceInterface#
What usePresence returns.
interface PresenceProperties
| Name | Type | Description |
|---|---|---|
| mounted | boolean | Whether the node should be in the tree: true from the render that opens it until its exit finishes. |
| state | PresenceState | The current phase. Map it with |
PresenceOptionsInterface#
Options of usePresence.
interface PresenceOptionsProperties
| Name | Type | Description |
|---|---|---|
| enter? | boolean | Mount closed and transition in. Default false. |
| exitMs? | number | (() => number) | How long |
| key? | string | null | Whose node it is (a scope's key). A change shows the new state at once: no enter, no exit. |
Types#
PresenceStateType#
Phase of a usePresence transition: entering (mounted in its closed look, for two frames),
open, closing (playing its exit) or closed (unmounted).
type PresenceState = 'entering' | 'open' | 'closing' | 'closed'