Skip to content

Commit 1635d09

Browse files
committed
fix: transition slide not smooth with min height and min width
1 parent 800f6c0 commit 1635d09

File tree

3 files changed

+4
-2
lines changed

3 files changed

+4
-2
lines changed

packages/playground/src/App.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44

55
<div>
66
Hello world!
7-
</div>
7+
</div>

packages/svelte/src/runtime/transition/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis
8484
const style = getComputedStyle(node);
8585
const opacity = +style.opacity;
8686
const primary_property = axis === 'y' ? 'height' : 'width';
87+
const min_primary_property = `min-${primary_property}`;
8788
const primary_property_value = parseFloat(style[primary_property]);
8889
const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'];
8990
const capitalized_secondary_properties = secondary_properties.map(
@@ -107,6 +108,7 @@ export function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis
107108
'overflow: hidden;' +
108109
`opacity: ${Math.min(t * 20, 1) * opacity};` +
109110
`${primary_property}: ${t * primary_property_value}px;` +
111+
`${min_primary_property}: 0;` +
110112
`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
111113
`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
112114
`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +

packages/svelte/test/runtime/samples/class-shortcut-with-transition/_config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default {
1616
raf.tick(150);
1717
assert.htmlEqual(
1818
target.innerHTML,
19-
'<p>foo</p><p class="red svelte-1yszte8 border" style="animation: __svelte_1333973250_0 100ms linear 0ms 1 both;">bar</p>'
19+
'<p>foo</p><p class="red svelte-1yszte8 border" style="animation: __svelte_567626776_0 100ms linear 0ms 1 both;">bar</p>'
2020
);
2121

2222
component.open = true;

0 commit comments

Comments
 (0)