Fix margin not being read, rename variables

src/runtime/transition/index.ts

@@ -109,15 +109,16 @@ export function slide(node: Element, {
 }: SlideParams = {}): TransitionConfig {
 	const style = getComputedStyle(node);
 	const opacity = +style.opacity;
-	const primary_dimension = axis === 'y' ? 'height' : 'width';
-	const primary_dimension_value = parseFloat(style[primary_dimension]);
-	const secondary_dimensions = axis === 'y' ? ['Top', 'Bottom'] : ['Left', 'Right'];
-	const padding_start_value = parseFloat(style.padding + secondary_dimensions[0]);
-	const padding_end_value = parseFloat(style.padding + secondary_dimensions[1]);
-	const margin_start_value = parseFloat(style.margin + secondary_dimensions[0]);
-	const margin_end_value = parseFloat(style.margin + secondary_dimensions[1]);
-	const border_width_start_value = parseFloat(style[`border${secondary_dimensions[0]}Width`]);
-	const border_width_end_value = parseFloat(style[`border${secondary_dimensions[1]}Width`]);
+	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,
@@ -125,13 +126,13 @@ export function slide(node: Element, {
 		css: t =>
 			'overflow: hidden;' +
 			`opacity: ${Math.min(t * 20, 1) * opacity};` +
-			`${primary_dimension}: ${t * primary_dimension_value}px;` +
-			`padding-${secondary_dimensions[0].toLowerCase()}: ${t * padding_start_value}px;` +
-			`padding-${secondary_dimensions[1].toLowerCase()}: ${t * padding_end_value}px;` +
-			`margin-${secondary_dimensions[0].toLowerCase()}: ${t * margin_start_value}px;` +
-			`margin-${secondary_dimensions[1].toLowerCase()}: ${t * margin_end_value}px;` +
-			`border-${secondary_dimensions[0].toLowerCase()}-width: ${t * border_width_start_value}px;` +
-			`border-${secondary_dimensions[1].toLowerCase()}-width: ${t * border_width_end_value}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;`
 	};
 }