@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 { TransitionCallback, TransitionOptions, TransitionKey } from '../types';
export declare function generateAutoKey(): TransitionKey;
/**
 * 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
 *
 * The `key` parameter is crucial for transition management - it uniquely identifies
 * each transition instance, allowing the system to track, cleanup, and prevent
 * conflicts between multiple transitions on the same element.
 *
 * @param {object} options - Configuration object
 * @param {TransitionKey} options.key - Unique identifier for this transition instance.
 *                                      Can be string or symbol. Used to manage and cleanup
 *                                      transitions internally.
 * @param {Function} options.in - Configuration for entrance animation.
 *                                Returns TransitionConfig with lifecycle hooks.
 * @param {Function} options.out - Configuration for exit animation.
 *                                 Returns TransitionConfig with lifecycle hooks.
 *
 * @template TAnimationValue - The type of value being animated (number | object)
 *
 * @returns {TransitionCallback} A callback function to be used as a ref
 *
 * @example
 * ```tsx
 * // Simple fade transition
 * <div ref={transition({
 *   key: 'hero-fade',
 *   in: (element) => ({
 *     prepare: (el) => el.style.opacity = '0',
 *     tick: (progress) => el.style.opacity = progress.toString(),
 *   }),
 *   out: (element) => ({
 *     tick: (progress) => el.style.opacity = progress.toString(),
 *   })
 * })} />
 * ```
 */
export declare function transition<TAnimationValue = number>(options: TransitionOptions<undefined, TAnimationValue> & {
    [TRANSITION_STRATEGY]?: (context: StrategyContext<TAnimationValue>) => TransitionStrategy<TAnimationValue>;
}): TransitionCallback;
//# sourceMappingURL=transition.d.ts.map