effex-monorepo
    Preparing search index...

    Interface AnimationOptions

    Options for enter/exit animations on a single element.

    See module docs above for Tailwind setup guide and common gotchas.

    interface AnimationOptions {
        enter?: string;
        enterFrom?: string;
        enterTo?: string;
        exit?: string;
        exitTo?: string;
        onBeforeEnter?: AnimationHook;
        onBeforeExit?: AnimationHook;
        onEnter?: AnimationHook;
        onExit?: AnimationHook;
        respectReducedMotion?: boolean;
        timeout?: number;
    }

    Hierarchy (View Summary)

    Index

    Properties

    enter?: string

    CSS class(es) for the enter animation target state. Applied after enterFrom is removed to trigger the transition.

    Use ! prefix (Tailwind important) if needed for specificity:

    "!opacity-100"
    
    enterFrom?: string

    CSS class(es) for the initial state before enter animation starts. Should include transition-* and duration-* for CSS transitions. These are removed after the first frame to trigger the transition.

    "opacity-0 transition-opacity duration-150"
    
    enterTo?: string

    CSS class(es) for the final state after enter animation completes. These persist on the element after animation ends.

    exit?: string

    CSS class(es) to apply at the start of exit animation. Should include transition-* and duration-* for CSS transitions.

    "transition-opacity duration-150"
    
    exitTo?: string

    CSS class(es) for the target state of exit animation. Applied after exit to trigger the transition.

    Use ! prefix (Tailwind important) if needed for specificity:

    "!opacity-0"
    
    onBeforeEnter?: AnimationHook

    Called before enter animation starts, after element is in DOM

    onBeforeExit?: AnimationHook

    Called before exit animation starts

    onEnter?: AnimationHook

    Called after enter animation completes

    onExit?: AnimationHook

    Called after exit animation completes, before element is removed from DOM

    respectReducedMotion?: boolean

    Whether to skip animations when user prefers reduced motion. When true and reduced motion is preferred, animations complete instantly.

    true
    
    timeout?: number

    Maximum time in milliseconds to wait for animation/transition to complete. If exceeded, animation is considered complete.

    Troubleshooting: If animations consistently hit this timeout, the transitionend event isn't firing. Check that your CSS classes include both transition-* AND duration-* properties.

    5000