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

pull/8569/head
S. Elliott Johnson 3 years ago
parent 4bcbded22f
commit c871c3187a

@ -6,38 +6,35 @@ import { is_function } from '../internal';
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").AnimationConfig} * @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").AnimationConfig}
*/ */
export function flip(node, { from, to }, params = {}) { export function flip(node, { from, to }, params = {}) {
const style = getComputedStyle(node); const style = getComputedStyle(node);
const transform = style.transform === 'none' ? '' : style.transform; const transform = style.transform === 'none' ? '' : style.transform;
const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat); const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
const dx = from.left + (from.width * ox) / to.width - (to.left + ox); const dx = from.left + (from.width * ox) / to.width - (to.left + ox);
const dy = from.top + (from.height * oy) / to.height - (to.top + oy); const dy = from.top + (from.height * oy) / to.height - (to.top + oy);
const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params; const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
return { return {
delay, delay,
duration: is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration, duration: is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
easing, easing,
css: (t, u) => { css: (t, u) => {
const x = u * dx; const x = u * dx;
const y = u * dy; const y = u * dy;
const sx = t + (u * from.width) / to.width; const sx = t + (u * from.width) / to.width;
const sy = t + (u * from.height) / to.height; const sy = t + (u * from.height) / to.height;
return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`; return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
} }
}; };
} }
/** @typedef {Object} AnimationConfig /** @typedef {Object} AnimationConfig
* @property {number} [delay] * @property {number} [delay]
* @property {number} [duration] * @property {number} [duration]
* @property {(t:number)=>number} [easing] * @property {(t:number)=>number} [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} FlipParams /** @typedef {Object} FlipParams
* @property {number} [delay] * @property {number} [delay]
* @property {number|((len:number)=>number)} [duration] * @property {number|((len:number)=>number)} [duration]
* @property {(t:number)=>number} [easing] * @property {(t:number)=>number} [easing]
*/ */

Loading…
Cancel
Save