Skip to content

Commit

Permalink
fix: transition slide not smooth with min height and min width
Browse files Browse the repository at this point in the history
  • Loading branch information
xxkl1 committed Jul 4, 2023
1 parent 800f6c0 commit 1635d09
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 2 deletions.
2 changes: 1 addition & 1 deletion packages/playground/src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@

<div>
Hello world!
</div>
</div>
2 changes: 2 additions & 0 deletions packages/svelte/src/runtime/transition/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ export function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis
const style = getComputedStyle(node);
const opacity = +style.opacity;
const primary_property = axis === 'y' ? 'height' : 'width';
const min_primary_property = `min-${primary_property}`;
const primary_property_value = parseFloat(style[primary_property]);
const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'];
const capitalized_secondary_properties = secondary_properties.map(
Expand All @@ -107,6 +108,7 @@ export function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis
'overflow: hidden;' +
`opacity: ${Math.min(t * 20, 1) * opacity};` +
`${primary_property}: ${t * primary_property_value}px;` +
`${min_primary_property}: 0;` +
`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;` +
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default {
raf.tick(150);
assert.htmlEqual(
target.innerHTML,
'<p>foo</p><p class="red svelte-1yszte8 border" style="animation: __svelte_1333973250_0 100ms linear 0ms 1 both;">bar</p>'
'<p>foo</p><p class="red svelte-1yszte8 border" style="animation: __svelte_567626776_0 100ms linear 0ms 1 both;">bar</p>'
);

component.open = true;
Expand Down

0 comments on commit 1635d09

Please sign in to comment.