Urara-Blog/node_modules/.pnpm-store/v3/files/92/98f4c1f867f3f145a7c4d05da800a6b900079a08b32e7c647f8ff4a62ef5aa81a5f32f2c584e989298e61518da047dd14e6f7e99a5adce28dd34006da300b4
2022-08-14 01:14:53 +08:00

25 lines
1 KiB
Text

import { cubicOut } from '../easing/index.mjs';
import { is_function } from '../internal/index.mjs';
function flip(node, { from, to }, params = {}) {
const style = getComputedStyle(node);
const transform = style.transform === 'none' ? '' : style.transform;
const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
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 { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
return {
delay,
duration: is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
easing,
css: (t, u) => {
const x = u * dx;
const y = u * dy;
const sx = t + u * from.width / to.width;
const sy = t + u * from.height / to.height;
return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
}
};
}
export { flip };