make crossfade scale the element to target rect

pull/3175/head
Stefan Buhrmester 6 years ago
parent 943c04834a
commit 83e9d49cc9

@ -188,6 +188,8 @@ export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
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);
@ -200,7 +202,7 @@ export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
easing,
css: (t, u) => `
opacity: ${t * opacity};
transform: ${transform} translate(${u * dx}px,${u * dy}px);
transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1-t) * dw}, ${t + (1-t) * dh});
`
};
}

Loading…
Cancel
Save