fix: transition slide not smooth with min-height and min-width

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;` +

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;