[feat] add axis option to slide transition

src/runtime/transition/index.ts

@@ -98,15 +98,45 @@ 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;
+
+	if (axis === 'x') {
+		const width = parseFloat(style.width);
+		const padding_left = parseFloat(style.paddingLeft);
+		const padding_right = parseFloat(style.paddingRight);
+		const margin_left = parseFloat(style.marginLeft);
+		const margin_right = parseFloat(style.marginRight);
+		const border_left_width = parseFloat(style.borderLeftWidth);
+		const border_right_width = parseFloat(style.borderRightWidth);
+
+		return {
+			delay,
+			duration,
+			easing,
+			css: t =>
+				'white-space: nowrap;' +
+				'overflow: hidden;' +
+				`opacity: ${Math.min(t * 20, 1) * opacity};` +
+				`width: ${t * width}px;` +
+				`padding-left: ${t * padding_left}px;` +
+				`padding-right: ${t * padding_right}px;` +
+				`margin-left: ${t * margin_left}px;` +
+				`margin-right: ${t * margin_right}px;` +
+				`border-left-width: ${t * border_left_width}px;` +
+				`border-right-width: ${t * border_right_width}px;`
+		};
+	}
+
 	const height = parseFloat(style.height);
 	const padding_top = parseFloat(style.paddingTop);
 	const padding_bottom = parseFloat(style.paddingBottom);