diff --git a/.changeset/long-weeks-brush.md b/.changeset/long-weeks-brush.md new file mode 100644 index 0000000000..b0e184caa0 --- /dev/null +++ b/.changeset/long-weeks-brush.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: account for parent scale when animating elements diff --git a/packages/svelte/src/animate/index.js b/packages/svelte/src/animate/index.js index fbf2ac83e2..2ce7708bc7 100644 --- a/packages/svelte/src/animate/index.js +++ b/packages/svelte/src/animate/index.js @@ -11,18 +11,37 @@ import { cubicOut } from '../easing/index.js'; * @returns {AnimationConfig} */ export function flip(node, { from, to }, params = {}) { + var { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params; + var style = getComputedStyle(node); - var zoom = get_zoom(node); // https://drafts.csswg.org/css-viewport/#effective-zoom + // find the transform origin, expressed as a pair of values between 0 and 1 var transform = style.transform === 'none' ? '' : style.transform; var [ox, oy] = style.transformOrigin.split(' ').map(parseFloat); + ox /= node.clientWidth; + oy /= node.clientHeight; + + // calculate effect of parent transforms and zoom + var zoom = get_zoom(node); // https://drafts.csswg.org/css-viewport/#effective-zoom + var sx = node.clientWidth / to.width / zoom; + var sy = node.clientHeight / to.height / zoom; + + // find the starting position of the transform origin + var fx = from.left + from.width * ox; + var fy = from.top + from.height * oy; + + // find the ending position of the transform origin + var tx = to.left + to.width * ox; + var ty = to.top + to.height * oy; + + // find the translation at the start of the transform + var dx = (fx - tx) * sx; + var dy = (fy - ty) * sy; + + // find the relative scale at the start of the transform var dsx = from.width / to.width; var dsy = from.height / to.height; - var dx = (from.left + dsx * ox - (to.left + ox)) / zoom; - var dy = (from.top + dsy * oy - (to.top + oy)) / zoom; - var { 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, @@ -32,7 +51,8 @@ export function flip(node, { from, to }, params = {}) { var y = u * dy; var sx = t + u * dsx; var sy = t + u * dsy; - return `transform: ${transform} scale(${sx}, ${sy}) translate(${x}px, ${y}px);`; + + return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`; } }; }