|
|
|
@ -4,7 +4,10 @@ import { assign, split_css_unit, is_function } from '../internal';
|
|
|
|
* @param {BlurParams}
|
|
|
|
* @param {BlurParams}
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
export function blur(node, { delay = 0, duration = 400, easing = cubicInOut, amount = 5, opacity = 0 } = {}) {
|
|
|
|
export function blur(
|
|
|
|
|
|
|
|
node,
|
|
|
|
|
|
|
|
{ delay = 0, duration = 400, easing = cubicInOut, amount = 5, opacity = 0 } = {}
|
|
|
|
|
|
|
|
) {
|
|
|
|
const style = getComputedStyle(node);
|
|
|
|
const style = getComputedStyle(node);
|
|
|
|
const target_opacity = +style.opacity;
|
|
|
|
const target_opacity = +style.opacity;
|
|
|
|
const f = style.filter === 'none' ? '' : style.filter;
|
|
|
|
const f = style.filter === 'none' ? '' : style.filter;
|
|
|
|
@ -34,7 +37,10 @@ export function fade(node, { delay = 0, duration = 400, easing = linear } = {})
|
|
|
|
* @param {FlyParams}
|
|
|
|
* @param {FlyParams}
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
export function fly(node, { delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0, opacity = 0 } = {}) {
|
|
|
|
export function fly(
|
|
|
|
|
|
|
|
node,
|
|
|
|
|
|
|
|
{ delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0, opacity = 0 } = {}
|
|
|
|
|
|
|
|
) {
|
|
|
|
const style = getComputedStyle(node);
|
|
|
|
const style = getComputedStyle(node);
|
|
|
|
const target_opacity = +style.opacity;
|
|
|
|
const target_opacity = +style.opacity;
|
|
|
|
const transform = style.transform === 'none' ? '' : style.transform;
|
|
|
|
const transform = style.transform === 'none' ? '' : style.transform;
|
|
|
|
@ -60,18 +66,25 @@ export function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis
|
|
|
|
const primary_property = axis === 'y' ? 'height' : 'width';
|
|
|
|
const primary_property = axis === 'y' ? 'height' : 'width';
|
|
|
|
const primary_property_value = parseFloat(style[primary_property]);
|
|
|
|
const primary_property_value = parseFloat(style[primary_property]);
|
|
|
|
const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'];
|
|
|
|
const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'];
|
|
|
|
const capitalized_secondary_properties = secondary_properties.map((e) => `${e[0].toUpperCase()}${e.slice(1)}`);
|
|
|
|
const capitalized_secondary_properties = secondary_properties.map(
|
|
|
|
|
|
|
|
(e) => `${e[0].toUpperCase()}${e.slice(1)}`
|
|
|
|
|
|
|
|
);
|
|
|
|
const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]);
|
|
|
|
const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]);
|
|
|
|
const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]);
|
|
|
|
const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]);
|
|
|
|
const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]);
|
|
|
|
const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]);
|
|
|
|
const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]);
|
|
|
|
const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]);
|
|
|
|
const border_width_start_value = parseFloat(style[`border${capitalized_secondary_properties[0]}Width`]);
|
|
|
|
const border_width_start_value = parseFloat(
|
|
|
|
const border_width_end_value = parseFloat(style[`border${capitalized_secondary_properties[1]}Width`]);
|
|
|
|
style[`border${capitalized_secondary_properties[0]}Width`]
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
const border_width_end_value = parseFloat(
|
|
|
|
|
|
|
|
style[`border${capitalized_secondary_properties[1]}Width`]
|
|
|
|
|
|
|
|
);
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
delay,
|
|
|
|
delay,
|
|
|
|
duration,
|
|
|
|
duration,
|
|
|
|
easing,
|
|
|
|
easing,
|
|
|
|
css: (t) => 'overflow: hidden;' +
|
|
|
|
css: (t) =>
|
|
|
|
|
|
|
|
'overflow: hidden;' +
|
|
|
|
`opacity: ${Math.min(t * 20, 1) * opacity};` +
|
|
|
|
`opacity: ${Math.min(t * 20, 1) * opacity};` +
|
|
|
|
`${primary_property}: ${t * primary_property_value}px;` +
|
|
|
|
`${primary_property}: ${t * primary_property_value}px;` +
|
|
|
|
`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
|
|
|
|
`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
|
|
|
|
@ -86,7 +99,10 @@ export function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis
|
|
|
|
* @param {ScaleParams}
|
|
|
|
* @param {ScaleParams}
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
export function scale(node, { delay = 0, duration = 400, easing = cubicOut, start = 0, opacity = 0 } = {}) {
|
|
|
|
export function scale(
|
|
|
|
|
|
|
|
node,
|
|
|
|
|
|
|
|
{ delay = 0, duration = 400, easing = cubicOut, start = 0, opacity = 0 } = {}
|
|
|
|
|
|
|
|
) {
|
|
|
|
const style = getComputedStyle(node);
|
|
|
|
const style = getComputedStyle(node);
|
|
|
|
const target_opacity = +style.opacity;
|
|
|
|
const target_opacity = +style.opacity;
|
|
|
|
const transform = style.transform === 'none' ? '' : style.transform;
|
|
|
|
const transform = style.transform === 'none' ? '' : style.transform;
|
|
|
|
@ -115,12 +131,10 @@ export function draw(node, { delay = 0, speed, duration, easing = cubicInOut } =
|
|
|
|
if (duration === undefined) {
|
|
|
|
if (duration === undefined) {
|
|
|
|
if (speed === undefined) {
|
|
|
|
if (speed === undefined) {
|
|
|
|
duration = 800;
|
|
|
|
duration = 800;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
else {
|
|
|
|
|
|
|
|
duration = len / speed;
|
|
|
|
duration = len / speed;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if (typeof duration === 'function') {
|
|
|
|
else if (typeof duration === 'function') {
|
|
|
|
|
|
|
|
duration = duration(len);
|
|
|
|
duration = duration(len);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
@ -150,7 +164,11 @@ export function crossfade({ fallback, ...defaults }) {
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").TransitionConfig}
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
function crossfade(from_node, node, params) {
|
|
|
|
function crossfade(from_node, node, params) {
|
|
|
|
const { delay = 0, duration = (d) => Math.sqrt(d) * 30, easing = cubicOut } = assign(assign({}, defaults), params);
|
|
|
|
const {
|
|
|
|
|
|
|
|
delay = 0,
|
|
|
|
|
|
|
|
duration = (d) => Math.sqrt(d) * 30,
|
|
|
|
|
|
|
|
easing = cubicOut
|
|
|
|
|
|
|
|
} = assign(assign({}, defaults), params);
|
|
|
|
const from = from_node.getBoundingClientRect();
|
|
|
|
const from = from_node.getBoundingClientRect();
|
|
|
|
const to = node.getBoundingClientRect();
|
|
|
|
const to = node.getBoundingClientRect();
|
|
|
|
const dx = from.left - to.left;
|
|
|
|
const dx = from.left - to.left;
|
|
|
|
@ -168,7 +186,9 @@ export function crossfade({ fallback, ...defaults }) {
|
|
|
|
css: (t, u) => `
|
|
|
|
css: (t, u) => `
|
|
|
|
opacity: ${t * opacity};
|
|
|
|
opacity: ${t * opacity};
|
|
|
|
transform-origin: top left;
|
|
|
|
transform-origin: top left;
|
|
|
|
transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${t + (1 - t) * dh});
|
|
|
|
transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${
|
|
|
|
|
|
|
|
t + (1 - t) * dh
|
|
|
|
|
|
|
|
});
|
|
|
|
`
|
|
|
|
`
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -197,7 +217,6 @@ export function crossfade({ fallback, ...defaults }) {
|
|
|
|
return [transition(to_send, to_receive, false), transition(to_receive, to_send, true)];
|
|
|
|
return [transition(to_send, to_receive, false), transition(to_receive, to_send, true)];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** @typedef {(t: number) => number} EasingFunction */
|
|
|
|
/** @typedef {(t: number) => number} EasingFunction */
|
|
|
|
/** @typedef {Map<any, Element>} ClientRectMap */
|
|
|
|
/** @typedef {Map<any, Element>} ClientRectMap */
|
|
|
|
|
|
|
|
|
|
|
|
|