feat: introduce axis parameter to allow for horizontal slide transition (#6183)

---------

Co-authored-by: Tan Li Hau <[email protected]>

Author: Theo-Steiner

site/content/docs/04-run-time.md

@@ -768,6 +768,7 @@ Slides an element in and out.
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
 * `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
+- `axis` (`x` | `y`, default `y`) — the axis of motion along which the transition occurs
 
 ```sv
 <script>
@@ -776,8 +777,8 @@ Slides an element in and out.
 </script>
 
 {#if condition}
-	<div transition:slide="{{delay: 250, duration: 300, easing: quintOut }}">
-		slides in and out
+	<div transition:slide="{{delay: 250, duration: 300, easing: quintOut, axis: 'x'}}">
+		slides in and out horizontally
 	</div>
 {/if}
 ```

src/runtime/transition/index.ts

@@ -98,37 +98,41 @@ export interface SlideParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
+	axis?: 'x' | 'y';
 }
 
 export function slide(node: Element, {
 	delay = 0,
 	duration = 400,
-	easing = cubicOut
+	easing = cubicOut,
+	axis = 'y'
 }: SlideParams = {}): TransitionConfig {
 	const style = getComputedStyle(node);
 	const opacity = +style.opacity;
-	const height = parseFloat(style.height);
-	const padding_top = parseFloat(style.paddingTop);
-	const padding_bottom = parseFloat(style.paddingBottom);
-	const margin_top = parseFloat(style.marginTop);
-	const margin_bottom = parseFloat(style.marginBottom);
-	const border_top_width = parseFloat(style.borderTopWidth);
-	const border_bottom_width = parseFloat(style.borderBottomWidth);
-
+	const primary_property = axis === 'y' ? 'height' : 'width';
+	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)}`);
+	const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]);
+	const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]);
+	const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]);
+	const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]);
+	const border_width_start_value = parseFloat(style[`border${capitalized_secondary_properties[0]}Width`]);
+	const border_width_end_value = parseFloat(style[`border${capitalized_secondary_properties[1]}Width`]);
 	return {
 		delay,
 		duration,
 		easing,
 		css: t =>
 			'overflow: hidden;' +
 			`opacity: ${Math.min(t * 20, 1) * opacity};` +
-			`height: ${t * height}px;` +
-			`padding-top: ${t * padding_top}px;` +
-			`padding-bottom: ${t * padding_bottom}px;` +
-			`margin-top: ${t * margin_top}px;` +
-			`margin-bottom: ${t * margin_bottom}px;` +
-			`border-top-width: ${t * border_top_width}px;` +
-			`border-bottom-width: ${t * border_bottom_width}px;`
+			`${primary_property}: ${t * primary_property_value}px;` +
+			`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;` +
+			`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;`
 	};
 }