mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
1.8 KiB
82 lines
1.8 KiB
import { cubicOut, cubicInOut } from './easing';
|
|
|
|
export function fade(node, {
|
|
delay = 0,
|
|
duration = 400
|
|
}) {
|
|
const o = +getComputedStyle(node).opacity;
|
|
|
|
return {
|
|
delay,
|
|
duration,
|
|
css: t => `opacity: ${t * o}`
|
|
};
|
|
}
|
|
|
|
export function fly(node, {
|
|
delay = 0,
|
|
duration = 400,
|
|
easing = cubicOut,
|
|
x = 0,
|
|
y = 0
|
|
}) {
|
|
const style = getComputedStyle(node);
|
|
const opacity = +style.opacity;
|
|
const transform = style.transform === 'none' ? '' : style.transform;
|
|
|
|
return {
|
|
delay,
|
|
duration,
|
|
easing,
|
|
css: t => `
|
|
transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
|
|
opacity: ${t * opacity}`
|
|
};
|
|
}
|
|
|
|
export 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;`
|
|
};
|
|
}
|
|
|
|
export function draw(node, {
|
|
delay = 0,
|
|
duration = 800,
|
|
easing = cubicInOut
|
|
}) {
|
|
const len = node.getTotalLength();
|
|
|
|
return {
|
|
delay,
|
|
duration,
|
|
easing,
|
|
css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}`
|
|
};
|
|
} |