/** * Options for the useAnimate hook. * * @category Hooks */ export interface UseAnimateOptions { /** Duration (ms) of the opening phase. When omitted, animation can be stepped manually. */ t1?: number; /** Duration (ms) of the closing phase. Defaults to a fraction of t1 when not provided. */ t2?: number; /** Enables one-shot animation behavior. */ oneShot?: boolean; /** Initial phase on mount. */ initial?: 'idle' | 'open' | 'closed'; } /** * Result returned by the useAnimate hook. * * @category Hooks */ export interface UseAnimateResult { /** True during the opening phase. */ opening: boolean; /** True during the closing phase. */ closing: boolean; /** True while animation classes should be applied and not temporarily suppressed. */ animating: boolean; /** True while an opening or closing transition is in progress, useful for keeping a component mounted. */ active: boolean; /** True only before any animation has started. */ idle: boolean; /** CSS variables controlling animation timing and direction. */ animationVars: Record; /** CSS variables for opening timing and direction. */ openingVars: Record; /** CSS variables for closing timing and direction. */ closingVars: Record; /** Triggers animation towards open or closed state. */ animate(next?: 'open' | 'closed'): void; } /** * Handles open/close animation with interrupt support. * * Flow: * - animate('open') → sets phase to "opening" and starts a timer * - after t1 → phase becomes "open" and timer is cleared * - animate('closed') → sets phase to "closing" and starts a timer * - after t2 (or the derived closing duration when t2 is omitted) → phase becomes "closed" and timer is cleared * * Interrupt: * - calling animate() during an active transition clears the current timer * - a new transition starts immediately * - for one render animating = false (reset frame) * * State usage: * - opening / closing → current transition phase * - active → true while transition is in progress (used to keep a component mounted during enter/exit) * - animating → true while animation classes should be applied; disabled during the reset frame * - idle → true only before the first animation * * Important: * - use external state to decide whether a component should be shown * - use `active` to extend mounting while enter/exit animation is still running * - use `animating` to apply or remove animation classes * - do not use `animate` in `useEffect` dependency arrays, as it is an imperative trigger and may disrupt animation flow * * Timer: * - created when transition starts * - cleared on completion or interrupt * * Modes: * - t1 defined → automatic timed transitions * - t1 undefined → manual stepper (each call advances phase) * - oneShot → only opening transition is executed * * @function * @param options Hook configuration options * * @category Hooks */ export declare function useAnimate(options?: UseAnimateOptions): UseAnimateResult;