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

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

import { TransitionConfig, AnimationController } from '../types';
export declare const TRANSITION_STRATEGY: unique symbol;
export interface StrategyContext<TAnimationValue = number> {
    currentAnimation: {
        controller: AnimationController<TAnimationValue>;
        direction: "in" | "out";
    } | null;
}
export interface AnimationSetup<TAnimationValue = number> {
    config?: TransitionConfig<TAnimationValue>;
    state: {
        position: TAnimationValue;
        velocity: TAnimationValue extends number ? number : Record<string, number>;
    };
    from: TAnimationValue;
    to: TAnimationValue;
    direction: "forward" | "backward";
}
export interface TransitionConfigs<TAnimationValue = number> {
    in?: Promise<TransitionConfig<TAnimationValue>>;
    out?: Promise<TransitionConfig<TAnimationValue>>;
}
export interface TransitionStrategy<TAnimationValue = number> {
    runIn: (configs: TransitionConfigs<TAnimationValue>) => Promise<AnimationSetup<TAnimationValue>>;
    runOut: (configs: TransitionConfigs<TAnimationValue>) => Promise<AnimationSetup<TAnimationValue>>;
}
/**
 * Creates a transition callback that can be used with framework-specific implementations
 * This is the core logic that frameworks can wrap with their own APIs
 *
 * UX Animation Behavior - 4 Main Scenarios:
 *
 * 1. No animation running + IN trigger:
 *    - Start entrance animation (0 → 1)
 *    - Return cleanup function for exit
 *
 * 2. No animation running + OUT trigger:
 *    - Clone element, start exit animation (1 → 0)
 *    - Remove clone when complete
 *
 * 3. IN animation running + OUT trigger:
 *    - Stop current IN animation (DOM is disappearing)
 *    - Clone element for exit animation
 *    - Create REVERSED IN animation (not OUT animation) with current state
 *    - This gives natural backward motion instead of jumping to OUT definition
 *
 * 4. OUT animation running + IN trigger:
 *    - Stop current OUT animation (cleanup any cloned elements)
 *    - Create REVERSED OUT animation (not IN animation) with current state
 *    - This gives natural backward motion instead of jumping to IN definition
 *    - Switch to entrance mode
 *
 * Closure Structure:
 * - Outer function: Returns entrance callback
 * - Inner function (entrance callback): Returns cleanup callback (exit)
 * - Cleanup callback: Handles exit transitions
 */
export declare const createDefaultStrategy: <TAnimationValue = number>(context: StrategyContext<TAnimationValue>) => TransitionStrategy<TAnimationValue>;
/**
 * Page transition strategy - Always starts fresh without checking current animations
 * This is used for page-level transitions where each transition should be independent
 */
export declare const createPageTransitionStrategy: <TAnimationValue = number>() => TransitionStrategy<TAnimationValue>;
//# sourceMappingURL=transition-strategy.d.ts.map