diff --git a/site/content/docs/04-run-time.md b/site/content/docs/04-run-time.md
index 72b0736ac6..46d025fe3e 100644
--- a/site/content/docs/04-run-time.md
+++ b/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
{#if condition}
-
- slides in and out
+
+ slides in and out horizontally
{/if}
```
diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts
index cc8ace194f..836efc3d40 100644
--- a/src/runtime/transition/index.ts
+++ b/src/runtime/transition/index.ts
@@ -98,23 +98,27 @@ 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,
@@ -122,13 +126,13 @@ export function slide(node: Element, {
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;`
};
}