|
|
|
|
@ -1,6 +1,8 @@
|
|
|
|
|
import { cubicOut, cubicInOut, linear } from '../easing';
|
|
|
|
|
import { assign, split_css_unit, is_function } from '../internal';
|
|
|
|
|
/** @param {Element} node
|
|
|
|
|
import { cubicOut, cubicInOut, linear } from '../easing.js';
|
|
|
|
|
import { assign, split_css_unit, is_function } from '../internal.js';
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param {Element} node
|
|
|
|
|
* @param {BlurParams}
|
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
|
*/
|
|
|
|
|
@ -20,7 +22,9 @@ export function blur(
|
|
|
|
|
css: (_t, u) => `opacity: ${target_opacity - od * u}; filter: ${f} blur(${u * value}${unit});`
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
/** @param {Element} node
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param {Element} node
|
|
|
|
|
* @param {FadeParams}
|
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
|
*/
|
|
|
|
|
@ -33,7 +37,9 @@ export function fade(node, { delay = 0, duration = 400, easing = linear } = {})
|
|
|
|
|
css: (t) => `opacity: ${t * o}`
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
/** @param {Element} node
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param {Element} node
|
|
|
|
|
* @param {FlyParams}
|
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
|
*/
|
|
|
|
|
@ -56,7 +62,9 @@ export function fly(
|
|
|
|
|
opacity: ${target_opacity - od * u}`
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
/** @param {Element} node
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param {Element} node
|
|
|
|
|
* @param {SlideParams}
|
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
|
*/
|
|
|
|
|
@ -95,7 +103,9 @@ export function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis
|
|
|
|
|
`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
/** @param {Element} node
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param {Element} node
|
|
|
|
|
* @param {ScaleParams}
|
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
|
*/
|
|
|
|
|
@ -118,7 +128,9 @@ export function scale(
|
|
|
|
|
`
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
/** @param {SVGElement & { getTotalLength(): number }} node
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param {SVGElement & { getTotalLength(): number }} node
|
|
|
|
|
* @param {DrawParams}
|
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
|
*/
|
|
|
|
|
@ -147,6 +159,7 @@ export function draw(node, { delay = 0, speed, duration, easing = cubicInOut } =
|
|
|
|
|
`
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param {CrossfadeParams & {
|
|
|
|
|
* fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;
|
|
|
|
|
@ -158,7 +171,8 @@ export function crossfade({ fallback, ...defaults }) {
|
|
|
|
|
const to_receive = new Map();
|
|
|
|
|
/** @type {ClientRectMap} */
|
|
|
|
|
const to_send = new Map();
|
|
|
|
|
/** @param {Element} from_node
|
|
|
|
|
/**
|
|
|
|
|
* @param {Element} from_node
|
|
|
|
|
* @param {Element} node
|
|
|
|
|
* @param {CrossfadeParams} params
|
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
|
@ -192,7 +206,9 @@ export function crossfade({ fallback, ...defaults }) {
|
|
|
|
|
`
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
/** @param {ClientRectMap} items
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param {ClientRectMap} items
|
|
|
|
|
* @param {ClientRectMap} counterparts
|
|
|
|
|
* @param {boolean} intro
|
|
|
|
|
* @returns {(node: any, params: import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").CrossfadeParams & { key: any; }) => () => import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
|
@ -220,26 +236,33 @@ export function crossfade({ fallback, ...defaults }) {
|
|
|
|
|
/** @typedef {(t: number) => number} EasingFunction */
|
|
|
|
|
/** @typedef {Map<any, Element>} ClientRectMap */
|
|
|
|
|
|
|
|
|
|
/** @typedef {Object} TransitionConfig
|
|
|
|
|
/**
|
|
|
|
|
* @typedef {Object} TransitionConfig
|
|
|
|
|
* @property {number} [delay]
|
|
|
|
|
* @property {number} [duration]
|
|
|
|
|
* @property {EasingFunction} [easing]
|
|
|
|
|
* @property {(t:number,u:number)=>string} [css]
|
|
|
|
|
* @property {(t:number,u:number)=>void} [tick]
|
|
|
|
|
*/
|
|
|
|
|
/** @typedef {Object} BlurParams
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @typedef {Object} BlurParams
|
|
|
|
|
* @property {number} [delay]
|
|
|
|
|
* @property {number} [duration]
|
|
|
|
|
* @property {EasingFunction} [easing]
|
|
|
|
|
* @property {number|string} [amount]
|
|
|
|
|
* @property {number} [opacity]
|
|
|
|
|
*/
|
|
|
|
|
/** @typedef {Object} FadeParams
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @typedef {Object} FadeParams
|
|
|
|
|
* @property {number} [delay]
|
|
|
|
|
* @property {number} [duration]
|
|
|
|
|
* @property {EasingFunction} [easing]
|
|
|
|
|
*/
|
|
|
|
|
/** @typedef {Object} FlyParams
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @typedef {Object} FlyParams
|
|
|
|
|
* @property {number} [delay]
|
|
|
|
|
* @property {number} [duration]
|
|
|
|
|
* @property {EasingFunction} [easing]
|
|
|
|
|
@ -247,26 +270,34 @@ export function crossfade({ fallback, ...defaults }) {
|
|
|
|
|
* @property {number|string} [y]
|
|
|
|
|
* @property {number} [opacity]
|
|
|
|
|
*/
|
|
|
|
|
/** @typedef {Object} SlideParams
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @typedef {Object} SlideParams
|
|
|
|
|
* @property {number} [delay]
|
|
|
|
|
* @property {number} [duration]
|
|
|
|
|
* @property {EasingFunction} [easing]
|
|
|
|
|
* @property {'x'|'y'} [axis]
|
|
|
|
|
*/
|
|
|
|
|
/** @typedef {Object} ScaleParams
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @typedef {Object} ScaleParams
|
|
|
|
|
* @property {number} [delay]
|
|
|
|
|
* @property {number} [duration]
|
|
|
|
|
* @property {EasingFunction} [easing]
|
|
|
|
|
* @property {number} [start]
|
|
|
|
|
* @property {number} [opacity]
|
|
|
|
|
*/
|
|
|
|
|
/** @typedef {Object} DrawParams
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @typedef {Object} DrawParams
|
|
|
|
|
* @property {number} [delay]
|
|
|
|
|
* @property {number} [speed]
|
|
|
|
|
* @property {number|((len:number)=>number)} [duration]
|
|
|
|
|
* @property {EasingFunction} [easing]
|
|
|
|
|
*/
|
|
|
|
|
/** @typedef {Object} CrossfadeParams
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @typedef {Object} CrossfadeParams
|
|
|
|
|
* @property {number} [delay]
|
|
|
|
|
* @property {number|((len:number)=>number)} [duration]
|
|
|
|
|
* @property {EasingFunction} [easing]
|
|
|
|
|
|