zoom is uniform, one calculation will do

pull/13317/head
Rich Harris 2 years ago
parent 6280d47970
commit 1fb3ef131b

@ -13,14 +13,14 @@ import { cubicOut } from '../easing/index.js';
*/
export function flip(node, { from, to }, params = {}) {
const style = getComputedStyle(node);
// need to account for scaled vs unscaled lengths (https://drafts.csswg.org/css-viewport/#scaled).
const dsx = from.width / parseFloat(style.width);
const dsy = from.height / parseFloat(style.height);
const zoom = from.width / parseFloat(style.width); // https://drafts.csswg.org/css-viewport/#effective-zoom
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)) / dsx;
const dy = (from.top + (from.height * oy) / to.height - (to.top + oy)) / dsy;
const dx = (from.left + (from.width * ox) / to.width - (to.left + ox)) / zoom;
const dy = (from.top + (from.height * oy) / to.height - (to.top + oy)) / zoom;
const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
return {
delay,
duration: typeof duration === 'function' ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,

Loading…
Cancel
Save