msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Lint and format src/runtime/transition/index.js

Browse Source
pull/8569/head
S. Elliott Johnson 3 years ago
parent 317c0fa623
commit 98c951de57
1 changed files with 173 additions and 154 deletions
Show Stats Download Patch File Download Diff File

327
src/runtime/transition/index.js
Unescape View File

@ -4,134 +4,148 @@ 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(
const style = getComputedStyle(node); node,
const target_opacity = +style.opacity; { delay = 0, duration = 400, easing = cubicInOut, amount = 5, opacity = 0 } = {}
const f = style.filter === 'none' ? '' : style.filter; ) {
const od = target_opacity * (1 - opacity); const style = getComputedStyle(node);
const [value, unit] = split_css_unit(amount); const target_opacity = +style.opacity;
return { const f = style.filter === 'none' ? '' : style.filter;
delay, const od = target_opacity * (1 - opacity);
duration, const [value, unit] = split_css_unit(amount);
easing, return {
css: (_t, u) => `opacity: ${target_opacity - od * u}; filter: ${f} blur(${u * value}${unit});` delay,
}; duration,
easing,
css: (_t, u) => `opacity: ${target_opacity - od * u}; filter: ${f} blur(${u * value}${unit});`
};
} }
/** @param {Element} node /** @param {Element} node
* @param {FadeParams} * @param {FadeParams}
* @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 fade(node, { delay = 0, duration = 400, easing = linear } = {}) { export function fade(node, { delay = 0, duration = 400, easing = linear } = {}) {
const o = +getComputedStyle(node).opacity; const o = +getComputedStyle(node).opacity;
return { return {
delay, delay,
duration, duration,
easing, easing,
css: (t) => `opacity: ${t * o}` css: (t) => `opacity: ${t * o}`
}; };
} }
/** @param {Element} node /** @param {Element} node
* @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(
const style = getComputedStyle(node); node,
const target_opacity = +style.opacity; { delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0, opacity = 0 } = {}
const transform = style.transform === 'none' ? '' : style.transform; ) {
const od = target_opacity * (1 - opacity); const style = getComputedStyle(node);
const [xValue, xUnit] = split_css_unit(x); const target_opacity = +style.opacity;
const [yValue, yUnit] = split_css_unit(y); const transform = style.transform === 'none' ? '' : style.transform;
return { const od = target_opacity * (1 - opacity);
delay, const [xValue, xUnit] = split_css_unit(x);
duration, const [yValue, yUnit] = split_css_unit(y);
easing, return {
css: (t, u) => ` delay,
duration,
easing,
css: (t, u) => `
transform: ${transform} translate(${(1 - t) * xValue}${xUnit}, ${(1 - t) * yValue}${yUnit}); transform: ${transform} translate(${(1 - t) * xValue}${xUnit}, ${(1 - t) * yValue}${yUnit});
opacity: ${target_opacity - od * u}` opacity: ${target_opacity - od * u}`
}; };
} }
/** @param {Element} node /** @param {Element} node
* @param {SlideParams} * @param {SlideParams}
* @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 slide(node, { delay = 0, duration = 400, easing = cubicOut, axis = 'y' } = {}) { export function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis = 'y' } = {}) {
const style = getComputedStyle(node); const style = getComputedStyle(node);
const opacity = +style.opacity; const opacity = +style.opacity;
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(
const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]); (e) => `${e[0].toUpperCase()}${e.slice(1)}`
const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]); );
const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]); const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]);
const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]); const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]);
const border_width_start_value = parseFloat(style[`border${capitalized_secondary_properties[0]}Width`]); const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]);
const border_width_end_value = parseFloat(style[`border${capitalized_secondary_properties[1]}Width`]); const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]);
return { const border_width_start_value = parseFloat(
delay, style[`border${capitalized_secondary_properties[0]}Width`]
duration, );
easing, const border_width_end_value = parseFloat(
css: (t) => 'overflow: hidden;' + style[`border${capitalized_secondary_properties[1]}Width`]
`opacity: ${Math.min(t * 20, 1) * opacity};` + );
`${primary_property}: ${t * primary_property_value}px;` + return {
`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` + delay,
`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` + duration,
`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` + easing,
`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` + css: (t) =>
`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` + 'overflow: hidden;' +
`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;` `opacity: ${Math.min(t * 20, 1) * opacity};` +
}; `${primary_property}: ${t * primary_property_value}px;` +
`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
};
} }
/** @param {Element} node /** @param {Element} node
* @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(
const style = getComputedStyle(node); node,
const target_opacity = +style.opacity; { delay = 0, duration = 400, easing = cubicOut, start = 0, opacity = 0 } = {}
const transform = style.transform === 'none' ? '' : style.transform; ) {
const sd = 1 - start; const style = getComputedStyle(node);
const od = target_opacity * (1 - opacity); const target_opacity = +style.opacity;
return { const transform = style.transform === 'none' ? '' : style.transform;
delay, const sd = 1 - start;
duration, const od = target_opacity * (1 - opacity);
easing, return {
css: (_t, u) => ` delay,
duration,
easing,
css: (_t, u) => `
transform: ${transform} scale(${1 - sd * u}); transform: ${transform} scale(${1 - sd * u});
opacity: ${target_opacity - od * u} opacity: ${target_opacity - od * u}
` `
}; };
} }
/** @param {SVGElement & { getTotalLength(): number }} node /** @param {SVGElement & { getTotalLength(): number }} node
* @param {DrawParams} * @param {DrawParams}
* @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 draw(node, { delay = 0, speed, duration, easing = cubicInOut } = {}) { export function draw(node, { delay = 0, speed, duration, easing = cubicInOut } = {}) {
let len = node.getTotalLength(); let len = node.getTotalLength();
const style = getComputedStyle(node); const style = getComputedStyle(node);
if (style.strokeLinecap !== 'butt') { if (style.strokeLinecap !== 'butt') {
len += parseInt(style.strokeWidth); len += parseInt(style.strokeWidth);
} }
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') {
} duration = duration(len);
else if (typeof duration === 'function') { }
duration = duration(len); return {
} delay,
return { duration,
delay, easing,
duration, css: (_, u) => `
easing,
css: (_, u) => `
stroke-dasharray: ${len}; stroke-dasharray: ${len};
stroke-dashoffset: ${u * len}; stroke-dashoffset: ${u * len};
` `
}; };
} }
/** /**
* @param {CrossfadeParams & { * @param {CrossfadeParams & {
@ -140,64 +154,69 @@ export function draw(node, { delay = 0, speed, duration, easing = cubicInOut } =
* @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, (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]} * @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, (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]}
*/ */
export function crossfade({ fallback, ...defaults }) { export function crossfade({ fallback, ...defaults }) {
/** @type {ClientRectMap} */ /** @type {ClientRectMap} */
const to_receive = new Map(); const to_receive = new Map();
/** @type {ClientRectMap} */ /** @type {ClientRectMap} */
const to_send = new Map(); const to_send = new Map();
/** @param {Element} from_node /** @param {Element} from_node
* @param {Element} node * @param {Element} node
* @param {CrossfadeParams} params * @param {CrossfadeParams} params
* @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 {
const from = from_node.getBoundingClientRect(); delay = 0,
const to = node.getBoundingClientRect(); duration = (d) => Math.sqrt(d) * 30,
const dx = from.left - to.left; easing = cubicOut
const dy = from.top - to.top; } = assign(assign({}, defaults), params);
const dw = from.width / to.width; const from = from_node.getBoundingClientRect();
const dh = from.height / to.height; const to = node.getBoundingClientRect();
const d = Math.sqrt(dx * dx + dy * dy); const dx = from.left - to.left;
const style = getComputedStyle(node); const dy = from.top - to.top;
const transform = style.transform === 'none' ? '' : style.transform; const dw = from.width / to.width;
const opacity = +style.opacity; const dh = from.height / to.height;
return { const d = Math.sqrt(dx * dx + dy * dy);
delay, const style = getComputedStyle(node);
duration: is_function(duration) ? duration(d) : duration, const transform = style.transform === 'none' ? '' : style.transform;
easing, const opacity = +style.opacity;
css: (t, u) => ` return {
delay,
duration: is_function(duration) ? duration(d) : duration,
easing,
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
});
` `
}; };
} }
/** @param {ClientRectMap} items /** @param {ClientRectMap} items
* @param {ClientRectMap} counterparts * @param {ClientRectMap} counterparts
* @param {boolean} intro * @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} * @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}
*/ */
function transition(items, counterparts, intro) { function transition(items, counterparts, intro) {
return (node, params) => { return (node, params) => {
items.set(params.key, node); items.set(params.key, node);
return () => { return () => {
if (counterparts.has(params.key)) { if (counterparts.has(params.key)) {
const other_node = counterparts.get(params.key); const other_node = counterparts.get(params.key);
counterparts.delete(params.key); counterparts.delete(params.key);
return crossfade(other_node, node, params); return crossfade(other_node, node, params);
} }
// if the node is disappearing altogether // if the node is disappearing altogether
// (i.e. wasn't claimed by the other list) // (i.e. wasn't claimed by the other list)
// then we need to supply an outro // then we need to supply an outro
items.delete(params.key); items.delete(params.key);
return fallback && fallback(node, params, intro); return fallback && fallback(node, params, intro);
}; };
}; };
} }
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 */
@ -206,19 +225,19 @@ export function crossfade({ fallback, ...defaults }) {
* @property {number} [duration] * @property {number} [duration]
* @property {EasingFunction} [easing] * @property {EasingFunction} [easing]
* @property {(t:number,u:number)=>string} [css] * @property {(t:number,u:number)=>string} [css]
* @property {(t:number,u:number)=>void} [tick] * @property {(t:number,u:number)=>void} [tick]
*/ */
/** @typedef {Object} BlurParams /** @typedef {Object} BlurParams
* @property {number} [delay] * @property {number} [delay]
* @property {number} [duration] * @property {number} [duration]
* @property {EasingFunction} [easing] * @property {EasingFunction} [easing]
* @property {number|string} [amount] * @property {number|string} [amount]
* @property {number} [opacity] * @property {number} [opacity]
*/ */
/** @typedef {Object} FadeParams /** @typedef {Object} FadeParams
* @property {number} [delay] * @property {number} [delay]
* @property {number} [duration] * @property {number} [duration]
* @property {EasingFunction} [easing] * @property {EasingFunction} [easing]
*/ */
/** @typedef {Object} FlyParams /** @typedef {Object} FlyParams
* @property {number} [delay] * @property {number} [delay]
@ -226,29 +245,29 @@ export function crossfade({ fallback, ...defaults }) {
* @property {EasingFunction} [easing] * @property {EasingFunction} [easing]
* @property {number|string} [x] * @property {number|string} [x]
* @property {number|string} [y] * @property {number|string} [y]
* @property {number} [opacity] * @property {number} [opacity]
*/ */
/** @typedef {Object} SlideParams /** @typedef {Object} SlideParams
* @property {number} [delay] * @property {number} [delay]
* @property {number} [duration] * @property {number} [duration]
* @property {EasingFunction} [easing] * @property {EasingFunction} [easing]
* @property {'x'|'y'} [axis] * @property {'x'|'y'} [axis]
*/ */
/** @typedef {Object} ScaleParams /** @typedef {Object} ScaleParams
* @property {number} [delay] * @property {number} [delay]
* @property {number} [duration] * @property {number} [duration]
* @property {EasingFunction} [easing] * @property {EasingFunction} [easing]
* @property {number} [start] * @property {number} [start]
* @property {number} [opacity] * @property {number} [opacity]
*/ */
/** @typedef {Object} DrawParams /** @typedef {Object} DrawParams
* @property {number} [delay] * @property {number} [delay]
* @property {number} [speed] * @property {number} [speed]
* @property {number|((len:number)=>number)} [duration] * @property {number|((len:number)=>number)} [duration]
* @property {EasingFunction} [easing] * @property {EasingFunction} [easing]
*/ */
/** @typedef {Object} CrossfadeParams /** @typedef {Object} CrossfadeParams
* @property {number} [delay] * @property {number} [delay]
* @property {number|((len:number)=>number)} [duration] * @property {number|((len:number)=>number)} [duration]
* @property {EasingFunction} [easing] * @property {EasingFunction} [easing]
*/ */

Write Preview
Loading…
Cancel
Save