199 lines
6.6 KiB
JavaScript
199 lines
6.6 KiB
JavaScript
|
import "./chunk-UGBVNEQM.js";
|
||
|
|
|
||
|
|
// node_modules/svelte/src/transition/index.js
|
||
|
|
var linear = (x) => x;
|
||
|
|
function cubic_out(t) {
|
||
|
|
const f = t - 1;
|
||
|
|
return f * f * f + 1;
|
||
|
|
}
|
||
|
|
function cubic_in_out(t) {
|
||
|
|
return t < 0.5 ? 4 * t * t * t : 0.5 * Math.pow(2 * t - 2, 3) + 1;
|
||
|
|
}
|
||
|
|
function split_css_unit(value) {
|
||
|
|
const split = typeof value === "string" && value.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
|
||
|
|
return split ? [parseFloat(split[1]), split[2] || "px"] : [
|
||
|
|
/** @type {number} */
|
||
|
|
value,
|
||
|
|
"px"
|
||
|
|
];
|
||
|
|
}
|
||
|
|
function blur(node, { delay = 0, duration = 400, easing = cubic_in_out, 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);
|
||
|
|
const [value, unit] = split_css_unit(amount);
|
||
|
|
return {
|
||
|
|
delay,
|
||
|
|
duration,
|
||
|
|
easing,
|
||
|
|
css: (_t, u) => `opacity: ${target_opacity - od * u}; filter: ${f} blur(${u * value}${unit});`
|
||
|
|
};
|
||
|
|
}
|
||
|
|
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 = cubic_out, 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);
|
||
|
|
const [x_value, x_unit] = split_css_unit(x);
|
||
|
|
const [y_value, y_unit] = split_css_unit(y);
|
||
|
|
return {
|
||
|
|
delay,
|
||
|
|
duration,
|
||
|
|
easing,
|
||
|
|
css: (t, u) => `
|
||
|
|
transform: ${transform} translate(${(1 - t) * x_value}${x_unit}, ${(1 - t) * y_value}${y_unit});
|
||
|
|
opacity: ${target_opacity - od * u}`
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function slide(node, { delay = 0, duration = 400, easing = cubic_out, axis = "y" } = {}) {
|
||
|
|
const style = getComputedStyle(node);
|
||
|
|
const opacity = +style.opacity;
|
||
|
|
const primary_property = axis === "y" ? "height" : "width";
|
||
|
|
const primary_property_value = parseFloat(style[primary_property]);
|
||
|
|
const secondary_properties = axis === "y" ? ["top", "bottom"] : ["left", "right"];
|
||
|
|
const capitalized_secondary_properties = secondary_properties.map(
|
||
|
|
(e) => (
|
||
|
|
/** @type {'Left' | 'Right' | 'Top' | 'Bottom'} */
|
||
|
|
`${e[0].toUpperCase()}${e.slice(1)}`
|
||
|
|
)
|
||
|
|
);
|
||
|
|
const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]);
|
||
|
|
const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]);
|
||
|
|
const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]);
|
||
|
|
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_end_value = parseFloat(
|
||
|
|
style[`border${capitalized_secondary_properties[1]}Width`]
|
||
|
|
);
|
||
|
|
return {
|
||
|
|
delay,
|
||
|
|
duration,
|
||
|
|
easing,
|
||
|
|
css: (t) => `overflow: hidden;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;`
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function scale(node, { delay = 0, duration = 400, easing = cubic_out, 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 = cubic_in_out } = {}) {
|
||
|
|
let len = node.getTotalLength();
|
||
|
|
const style = getComputedStyle(node);
|
||
|
|
if (style.strokeLinecap !== "butt") {
|
||
|
|
len += parseInt(style.strokeWidth);
|
||
|
|
}
|
||
|
|
if (duration === void 0) {
|
||
|
|
if (speed === void 0) {
|
||
|
|
duration = 800;
|
||
|
|
} else {
|
||
|
|
duration = len / speed;
|
||
|
|
}
|
||
|
|
} else if (typeof duration === "function") {
|
||
|
|
duration = duration(len);
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
delay,
|
||
|
|
duration,
|
||
|
|
easing,
|
||
|
|
css: (_, u) => `
|
||
|
|
stroke-dasharray: ${len};
|
||
|
|
stroke-dashoffset: ${u * len};
|
||
|
|
`
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function assign(tar, src) {
|
||
|
|
for (const k in src) tar[k] = src[k];
|
||
|
|
return (
|
||
|
|
/** @type {T & S} */
|
||
|
|
tar
|
||
|
|
);
|
||
|
|
}
|
||
|
|
function crossfade({ fallback, ...defaults }) {
|
||
|
|
const to_receive = /* @__PURE__ */ new Map();
|
||
|
|
const to_send = /* @__PURE__ */ new Map();
|
||
|
|
function crossfade2(from_node, node, params) {
|
||
|
|
const {
|
||
|
|
delay = 0,
|
||
|
|
duration = (
|
||
|
|
/** @param {number} d */
|
||
|
|
(d2) => Math.sqrt(d2) * 30
|
||
|
|
),
|
||
|
|
easing = cubic_out
|
||
|
|
} = assign(assign({}, defaults), params);
|
||
|
|
const from = from_node.getBoundingClientRect();
|
||
|
|
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: typeof duration === "function" ? 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, node);
|
||
|
|
return () => {
|
||
|
|
if (counterparts.has(params.key)) {
|
||
|
|
const other_node = counterparts.get(params.key);
|
||
|
|
counterparts.delete(params.key);
|
||
|
|
return crossfade2(
|
||
|
|
/** @type {Element} */
|
||
|
|
other_node,
|
||
|
|
node,
|
||
|
|
params
|
||
|
|
);
|
||
|
|
}
|
||
|
|
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
|
||
|
|
};
|
||
|
|
//# sourceMappingURL=svelte_transition.js.map
|