From 385737ad9f144c643015a29c6a2137cd0ca30124 Mon Sep 17 00:00:00 2001 From: simeydotme Date: Sun, 30 Jan 2022 14:53:49 +0800 Subject: [PATCH 1/2] Allow FLIP animations perform correctly in scaled parent - get the scale factor by comparing against node.clientWidth - divide all the positions/dimensions by the scale to get the correct deltas - resolves #7205 - fixes regression from #6658 --- src/runtime/animate/index.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/runtime/animate/index.ts b/src/runtime/animate/index.ts index ff73bbc29e58..350206330729 100644 --- a/src/runtime/animate/index.ts +++ b/src/runtime/animate/index.ts @@ -21,8 +21,12 @@ export function flip(node: Element, { from, to }: { from: DOMRect; to: DOMRect } 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 scale = { + x: to.width / node.clientWidth, + y: to.height / node.clientHeight + }; + const dx = ((from.left / scale.x) + (from.width / scale.x) * ox / (to.width / scale.x)) - ((to.left / scale.x) + ox); + const dy = ((from.top / scale.y) + (from.height / scale.y) * oy / (to.height / scale.y)) - ((to.top / scale.y) + oy); const { delay = 0, From 546d09dd82c33aeee689686199d169eb9d9a2169 Mon Sep 17 00:00:00 2001 From: Simon Goellner Date: Wed, 9 Feb 2022 15:57:51 +0800 Subject: [PATCH 2/2] Update src/runtime/animate/index.ts incorporate the suggested change from @conduitry Co-authored-by: Conduitry --- src/runtime/animate/index.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/runtime/animate/index.ts b/src/runtime/animate/index.ts index 350206330729..3b4fd2f03c3d 100644 --- a/src/runtime/animate/index.ts +++ b/src/runtime/animate/index.ts @@ -21,12 +21,8 @@ export function flip(node: Element, { from, to }: { from: DOMRect; to: DOMRect } const transform = style.transform === 'none' ? '' : style.transform; const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat); - const scale = { - x: to.width / node.clientWidth, - y: to.height / node.clientHeight - }; - const dx = ((from.left / scale.x) + (from.width / scale.x) * ox / (to.width / scale.x)) - ((to.left / scale.x) + ox); - const dy = ((from.top / scale.y) + (from.height / scale.y) * oy / (to.height / scale.y)) - ((to.top / scale.y) + oy); + const dx = ((from.left - to.left) * node.clientWidth + from.width * ox) / to.width - ox; + const dy = ((from.top - to.top) * node.clientHeight + from.height * oy) / to.height - oy; const { delay = 0,