@ssgoi/core/dist/transition/transition.d.ts

Core animation engine for SSGOI - Native app-like page transitions with spring physics

import { StrategyContext, TRANSITION_STRATEGY, TransitionStrategy } from './transition-strategy';
import { RefCallback, TransitionCallback, TransitionOptions } from '../types';
type TransitionOptionsWithStrategy = TransitionOptions<undefined> & {
    [TRANSITION_STRATEGY]?: (context: StrategyContext) => TransitionStrategy;
};
/**
 * Framework-agnostic transition function that can be used as a ref
 *
 * @description
 * Creates a transition that can be attached to DOM elements via ref.
 * Manages entrance and exit animations with a complete lifecycle system.
 *
 * **IN Animation Lifecycle (Element Entering):**
 * 1. `prepare` - Setup element's initial state (e.g., opacity: 0)
 * 2. `wait` - Optional async delay before animation starts
 * 3. `onStart` - Called when animation begins
 * 4. `tick` - Called on each animation frame with progress value (0 → 1)
 * 5. `onEnd` - Called when animation completes
 *
 * **OUT Animation Lifecycle (Element Exiting):**
 * 1. `prepare` - Setup element's initial state for exit
 * 2. `wait` - Optional async delay before animation starts
 * 3. `onStart` - Called when animation begins
 * 4. `tick` - Called on each animation frame with progress value (1 → 0)
 * 5. `onEnd` - Called when animation completes and element is removed
 *
 * @param options - Transition configuration
 * @param mode - 'manual' (default) returns cleanup, 'auto' handles unmount via MutationObserver
 * @returns Callback function to be used as a ref
 *
 * @example
 * ```tsx
 * // Manual mode (default) - you handle cleanup
 * <div ref={transition({
 *   key: 'hero-fade',
 *   in: (element) => ({ tick: (p) => element.style.opacity = String(p) }),
 *   out: (element) => ({ tick: (p) => element.style.opacity = String(p) }),
 * })} />
 *
 * // Auto mode - automatic unmount detection via MutationObserver
 * <div ref={transition({
 *   key: 'hero-fade',
 *   in: (element) => ({ tick: (p) => element.style.opacity = String(p) }),
 *   out: (element) => ({ tick: (p) => element.style.opacity = String(p) }),
 * }, 'auto')} />
 * ```
 */
export declare function transition(options: TransitionOptionsWithStrategy, mode?: "manual"): TransitionCallback;
export declare function transition(options: TransitionOptionsWithStrategy, mode: "auto"): RefCallback;
export {};
//# sourceMappingURL=transition.d.ts.map