From 14e6c6e35c26fddf8037cc03a4c118d31fdd129a Mon Sep 17 00:00:00 2001
From: xxkl1 <sanyuelihuaxue@gmail.com>
Date: Mon, 1 May 2023 23:51:49 +0800
Subject: [PATCH] fix: transition slide not smooth with min-height and
 min-width

---
 src/runtime/transition/index.ts                                | 2 ++
 test/runtime/samples/class-shortcut-with-transition/_config.js | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts
index 7ea08a02d2..0c07ad0bef 100644
--- a/src/runtime/transition/index.ts
+++ b/src/runtime/transition/index.ts
@@ -111,6 +111,7 @@ export function slide(node: Element, {
 	const style = getComputedStyle(node);
 	const opacity = +style.opacity;
 	const primary_property = axis === 'y' ? 'height' : 'width';
+	const min_primary_property = `min-${primary_property}`;
 	const primary_property_value = parseFloat(style[primary_property]);
 	const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'];
 	const capitalized_secondary_properties = secondary_properties.map((e) => `${e[0].toUpperCase()}${e.slice(1)}`);
@@ -128,6 +129,7 @@ export function slide(node: Element, {
 			'overflow: hidden;' +
 			`opacity: ${Math.min(t * 20, 1) * opacity};` +
 			`${primary_property}: ${t * primary_property_value}px;` +
+			`${min_primary_property}: 0;` +
 			`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
 			`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
 			`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
diff --git a/test/runtime/samples/class-shortcut-with-transition/_config.js b/test/runtime/samples/class-shortcut-with-transition/_config.js
index 80df51bd4a..80def55aa3 100644
--- a/test/runtime/samples/class-shortcut-with-transition/_config.js
+++ b/test/runtime/samples/class-shortcut-with-transition/_config.js
@@ -17,7 +17,7 @@ export default {
 		raf.tick(150);
 		assert.htmlEqual(
 			target.innerHTML,
-			'<p>foo</p><p class="red svelte-1yszte8 border" style="animation: __svelte_1333973250_0 100ms linear 0ms 1 both;">bar</p>'
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="animation: __svelte_567626776_0 100ms linear 0ms 1 both;">bar</p>'
 		);
 
 		component.open = true;