From 83e9d49cc9f58f3c80163ba71f138ec500956bc5 Mon Sep 17 00:00:00 2001
From: Stefan Buhrmester <buhrmi@gmail.com>
Date: Fri, 5 Jul 2019 01:36:52 +0900
Subject: [PATCH 1/2] make crossfade scale the element to target rect

---
 src/runtime/transition/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts
index 3aaa19ef3b9c..4be2982fb061 100644
--- a/src/runtime/transition/index.ts
+++ b/src/runtime/transition/index.ts
@@ -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});
 			`
 		};
 	}

From 757ebc72543b6cf724df2b4462ad50b1dbf9f002 Mon Sep 17 00:00:00 2001
From: Stefan Buhrmester <dj@shitcoin.jp>
Date: Fri, 5 Jul 2019 01:41:11 +0900
Subject: [PATCH 2/2] fix transform origin during scaling

---
 src/runtime/transition/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts
index 4be2982fb061..d89730fd6b2b 100644
--- a/src/runtime/transition/index.ts
+++ b/src/runtime/transition/index.ts
@@ -202,6 +202,7 @@ export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
 			easing,
 			css: (t, u) => `
 				opacity: ${t * opacity};
+				transform-origin: top left;
 				transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1-t) * dw}, ${t + (1-t) * dh});
 			`
 		};