fix: account for min-width/height in slide transition

sveltejs · Jan 7, 2025 · 9fd0340 · 9fd0340
1 parent 4aadb34
commit 9fd0340
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/gold-olives-care.md b/.changeset/gold-olives-care.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: account for min-width/height in `slide` transition
diff --git a/packages/svelte/src/transition/index.js b/packages/svelte/src/transition/index.js
@@ -131,7 +131,8 @@ export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axi
 			`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
 			`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
 			`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
-			`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
+			`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;` +
+			`min-${primary_property}: 0`
 	};
 }
 

diff --git a/packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js b/packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js
@@ -18,7 +18,7 @@ export default test({
 		raf.tick(150);
 		assert.htmlEqual(
 			target.innerHTML,
-			'<p>foo</p><p class="red svelte-1yszte8 border" style="overflow: hidden; opacity: 0; border-top-width: 0.5px; border-bottom-width: 0.5px;">bar</p>'
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="overflow: hidden; opacity: 0; border-top-width: 0.5px; border-bottom-width: 0.5px; min-height: 0;">bar</p>'
 		);
 		component.open = true;
 		raf.tick(250);