183 lines
6.8 KiB
JavaScript
183 lines
6.8 KiB
JavaScript
import { cubicInOut, linear, cubicOut } from '../easing/index.mjs';
|
|
import { is_function, assign } from '../internal/index.mjs';
|
|
|
|
/*! *****************************************************************************
|
|
Copyright (c) Microsoft Corporation.
|
|
|
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
purpose with or without fee is hereby granted.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
PERFORMANCE OF THIS SOFTWARE.
|
|
***************************************************************************** */
|
|
|
|
function __rest(s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
}
|
|
|
|
function blur(node, { delay = 0, duration = 400, easing = cubicInOut, amount = 5, opacity = 0 } = {}) {
|
|
const style = getComputedStyle(node);
|
|
const target_opacity = +style.opacity;
|
|
const f = style.filter === 'none' ? '' : style.filter;
|
|
const od = target_opacity * (1 - opacity);
|
|
return {
|
|
delay,
|
|
duration,
|
|
easing,
|
|
css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);`
|
|
};
|
|
}
|
|
function fade(node, { delay = 0, duration = 400, easing = linear } = {}) {
|
|
const o = +getComputedStyle(node).opacity;
|
|
return {
|
|
delay,
|
|
duration,
|
|
easing,
|
|
css: t => `opacity: ${t * o}`
|
|
};
|
|
}
|
|
function fly(node, { delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0, opacity = 0 } = {}) {
|
|
const style = getComputedStyle(node);
|
|
const target_opacity = +style.opacity;
|
|
const transform = style.transform === 'none' ? '' : style.transform;
|
|
const od = target_opacity * (1 - opacity);
|
|
return {
|
|
delay,
|
|
duration,
|
|
easing,
|
|
css: (t, u) => `
|
|
transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
|
|
opacity: ${target_opacity - (od * u)}`
|
|
};
|
|
}
|
|
function slide(node, { delay = 0, duration = 400, easing = cubicOut } = {}) {
|
|
const style = getComputedStyle(node);
|
|
const opacity = +style.opacity;
|
|
const height = parseFloat(style.height);
|
|
const padding_top = parseFloat(style.paddingTop);
|
|
const padding_bottom = parseFloat(style.paddingBottom);
|
|
const margin_top = parseFloat(style.marginTop);
|
|
const margin_bottom = parseFloat(style.marginBottom);
|
|
const border_top_width = parseFloat(style.borderTopWidth);
|
|
const border_bottom_width = parseFloat(style.borderBottomWidth);
|
|
return {
|
|
delay,
|
|
duration,
|
|
easing,
|
|
css: t => 'overflow: hidden;' +
|
|
`opacity: ${Math.min(t * 20, 1) * opacity};` +
|
|
`height: ${t * height}px;` +
|
|
`padding-top: ${t * padding_top}px;` +
|
|
`padding-bottom: ${t * padding_bottom}px;` +
|
|
`margin-top: ${t * margin_top}px;` +
|
|
`margin-bottom: ${t * margin_bottom}px;` +
|
|
`border-top-width: ${t * border_top_width}px;` +
|
|
`border-bottom-width: ${t * border_bottom_width}px;`
|
|
};
|
|
}
|
|
function scale(node, { delay = 0, duration = 400, easing = cubicOut, start = 0, opacity = 0 } = {}) {
|
|
const style = getComputedStyle(node);
|
|
const target_opacity = +style.opacity;
|
|
const transform = style.transform === 'none' ? '' : style.transform;
|
|
const sd = 1 - start;
|
|
const od = target_opacity * (1 - opacity);
|
|
return {
|
|
delay,
|
|
duration,
|
|
easing,
|
|
css: (_t, u) => `
|
|
transform: ${transform} scale(${1 - (sd * u)});
|
|
opacity: ${target_opacity - (od * u)}
|
|
`
|
|
};
|
|
}
|
|
function draw(node, { delay = 0, speed, duration, easing = cubicInOut } = {}) {
|
|
let len = node.getTotalLength();
|
|
const style = getComputedStyle(node);
|
|
if (style.strokeLinecap !== 'butt') {
|
|
len += parseInt(style.strokeWidth);
|
|
}
|
|
if (duration === undefined) {
|
|
if (speed === undefined) {
|
|
duration = 800;
|
|
}
|
|
else {
|
|
duration = len / speed;
|
|
}
|
|
}
|
|
else if (typeof duration === 'function') {
|
|
duration = duration(len);
|
|
}
|
|
return {
|
|
delay,
|
|
duration,
|
|
easing,
|
|
css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}`
|
|
};
|
|
}
|
|
function crossfade(_a) {
|
|
var { fallback } = _a, defaults = __rest(_a, ["fallback"]);
|
|
const to_receive = new Map();
|
|
const to_send = new Map();
|
|
function crossfade(from, node, params) {
|
|
const { delay = 0, duration = d => Math.sqrt(d) * 30, easing = cubicOut } = assign(assign({}, defaults), params);
|
|
const to = node.getBoundingClientRect();
|
|
const dx = from.left - to.left;
|
|
const dy = from.top - to.top;
|
|
const dw = from.width / to.width;
|
|
const dh = from.height / to.height;
|
|
const d = Math.sqrt(dx * dx + dy * dy);
|
|
const style = getComputedStyle(node);
|
|
const transform = style.transform === 'none' ? '' : style.transform;
|
|
const opacity = +style.opacity;
|
|
return {
|
|
delay,
|
|
duration: is_function(duration) ? duration(d) : duration,
|
|
easing,
|
|
css: (t, u) => `
|
|
opacity: ${t * opacity};
|
|
transform-origin: top left;
|
|
transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${t + (1 - t) * dh});
|
|
`
|
|
};
|
|
}
|
|
function transition(items, counterparts, intro) {
|
|
return (node, params) => {
|
|
items.set(params.key, {
|
|
rect: node.getBoundingClientRect()
|
|
});
|
|
return () => {
|
|
if (counterparts.has(params.key)) {
|
|
const { rect } = counterparts.get(params.key);
|
|
counterparts.delete(params.key);
|
|
return crossfade(rect, node, params);
|
|
}
|
|
// if the node is disappearing altogether
|
|
// (i.e. wasn't claimed by the other list)
|
|
// then we need to supply an outro
|
|
items.delete(params.key);
|
|
return fallback && fallback(node, params, intro);
|
|
};
|
|
};
|
|
}
|
|
return [
|
|
transition(to_send, to_receive, false),
|
|
transition(to_receive, to_send, true)
|
|
];
|
|
}
|
|
|
|
export { blur, crossfade, draw, fade, fly, scale, slide };
|