diff --git a/.changeset/kind-baboons-approve.md b/.changeset/kind-baboons-approve.md new file mode 100644 index 0000000000..720a71cffd --- /dev/null +++ b/.changeset/kind-baboons-approve.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: improve intro transitions on dynamic mount diff --git a/packages/svelte/src/internal/client/transitions.js b/packages/svelte/src/internal/client/transitions.js index 7b283d5ef9..f2a4363a81 100644 --- a/packages/svelte/src/internal/client/transitions.js +++ b/packages/svelte/src/internal/client/transitions.js @@ -31,6 +31,7 @@ const DELAY_NEXT_TICK = Number.MIN_SAFE_INTEGER; /** @type {undefined | number} */ let active_tick_ref = undefined; +let skip_mount_intro = false; /** * @template T @@ -482,7 +483,6 @@ export function bind_transition(dom, get_transition_fn, props_fn, direction, glo // @ts-ignore dom.__animate = true; } - let foo = false; /** @type {import('./types.js').Block | null} */ let transition_block = block; main: while (transition_block !== null) { @@ -496,7 +496,7 @@ export function bind_transition(dom, get_transition_fn, props_fn, direction, glo can_show_intro_on_mount = true; } else if (transition_block.t === IF_BLOCK) { transition_block.r = if_block_transition; - if (can_show_intro_on_mount) { + if (can_show_intro_on_mount && !skip_mount_intro) { /** @type {import('./types.js').Block | null} */ let if_block = transition_block; while (if_block.t === IF_BLOCK) { @@ -511,14 +511,14 @@ export function bind_transition(dom, get_transition_fn, props_fn, direction, glo } } if (!can_apply_lazy_transitions && can_show_intro_on_mount) { - can_show_intro_on_mount = transition_block.e !== null; - foo = true; + can_show_intro_on_mount = !skip_mount_intro && transition_block.e !== null; } if (can_show_intro_on_mount || !global) { can_apply_lazy_transitions = true; } } else if (transition_block.t === ROOT_BLOCK && !can_apply_lazy_transitions) { - can_show_intro_on_mount = transition_block.e !== null || transition_block.i; + can_show_intro_on_mount = + !skip_mount_intro && (transition_block.e !== null || transition_block.i); } transition_block = transition_block.p; } @@ -529,7 +529,12 @@ export function bind_transition(dom, get_transition_fn, props_fn, direction, glo effect(() => { if (transition !== undefined) { // Destroy any existing transitions first - transition.x(); + try { + skip_mount_intro = true; + transition.x(); + } finally { + skip_mount_intro = false; + } } const transition_fn = get_transition_fn(); /** @param {DOMRect} [from] */ diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-transition/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-transition/_config.js index ed9e52b347..6f25556439 100644 --- a/packages/svelte/tests/runtime-runes/samples/dynamic-transition/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/dynamic-transition/_config.js @@ -20,6 +20,6 @@ export default test({ b2.click(); }); - assert.deepEqual(log, ['transition 2', 'transition 1', 'transition 1']); + assert.deepEqual(log, ['transition 2', 'transition 1']); } });