From 03025651e51a0db1ec27b05c9bba2e6e9235e3df Mon Sep 17 00:00:00 2001 From: Theo Steiner Date: Wed, 30 Mar 2022 13:48:17 +0900 Subject: [PATCH] Fix margin not being read, rename variables --- src/runtime/transition/index.ts | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts index 22307a0ec9..836efc3d40 100644 --- a/src/runtime/transition/index.ts +++ b/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;` }; }