m3-svelte
Version:
M3 Svelte implements the Material 3 design system in Svelte. See the [website](https://kendell.dev/m3-svelte/) for demos and usage instructions.
57 lines (56 loc) • 2.14 kB
TypeScript
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}
* > <div
* > 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 {};