From fbf4cbf22c144ef849dce6d3630a54344406d11a Mon Sep 17 00:00:00 2001 From: simeydotme Date: Tue, 24 Sep 2019 22:38:55 +0800 Subject: [PATCH] Calculate scale factor of elements in FLIP animations - divide the getBoundingClientRect dimensions by clientHeight or clientWidth - this gives us the element's scaled values as scaleX and scaleY - divide the "dx" and "dy" by the "scaleX" and "scaleY" This aims to fix #3555 by using the node's un-scaled width/height to calculate the amount it has been scaled. Then dividing the distance by this scale factor removes the janky start position which was shown in the test case. resolves #3555 --- src/runtime/animate/index.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/runtime/animate/index.ts b/src/runtime/animate/index.ts index d00d23c98d..3f841154a2 100644 --- a/src/runtime/animate/index.ts +++ b/src/runtime/animate/index.ts @@ -19,9 +19,11 @@ interface FlipParams { export function flip(node: Element, animation: { from: DOMRect; to: DOMRect }, params: FlipParams): AnimationConfig { const style = getComputedStyle(node); const transform = style.transform === 'none' ? '' : style.transform; + const scaleX = animation.from.width / node.clientWidth; + const scaleY = animation.from.height / node.clientHeight; - const dx = animation.from.left - animation.to.left; - const dy = animation.from.top - animation.to.top; + const dx = (animation.from.left - animation.to.left) / scaleX; + const dy = (animation.from.top - animation.to.top) / scaleY; const d = Math.sqrt(dx * dx + dy * dy);