import type { cubicOut } from "svelte/easing"; import type { TransitionConfig } from "svelte/transition"; interface transitionOptions { delay?: number; duration?: number; easing?: typeof cubicOut; } interface containerOptions { fallback?: (node: Element, params: transitionOptions & containerOptions & containerParamOptions, intro: boolean) => TransitionConfig; bgContainerZ?: number; fgContainerZ?: number; } interface containerParamOptions { key: string; } export declare const containerTransform: ({ fallback, ...defaults }: transitionOptions & containerOptions) => ((node: Element, params: transitionOptions & containerOptions & containerParamOptions) => () => TransitionConfig)[]; type sharedAxisOptions = { direction: "X" | "Y"; /** * true if this element is on the top/left of things * if it's first, then use transition: and set it to true * if it's last, then use transition: and set it to false * if it's in between, use separate in: and out: statements: * > set it to false when it's interacting with the left side, and true when interacting with its right * > in order to implement this, try something like using a prevPage variable: * > ``` * > {:else if page == 1} * >
in:sharedAxisTransition={{ * > direction: "X", * > rightSeam: prevPage > 1, (if we're transitioning from a page on the right, rightseam is true) * > }} * > out:sharedAxisTransition={{ * > direction: "X", * > rightSeam: page > 1, (if we're transitioning to a page on the right, rightseam is true) * > }} * > > * > ``` * * i went insane over figuring this out :) */ rightSeam: boolean; } | { direction: "Z"; leaving: boolean; }; export declare const sharedAxisTransition: (node: Element, options: transitionOptions & sharedAxisOptions) => { delay: number | undefined; duration: number; easing: (t: number) => number; css: (t: number, u: number) => string; }; export declare const outroClass: (node: Element) => { destroy(): void; }; export {};