diff --git a/.changeset/gentle-dolls-juggle.md b/.changeset/gentle-dolls-juggle.md new file mode 100644 index 0000000000..30b9ded59f --- /dev/null +++ b/.changeset/gentle-dolls-juggle.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: improve global transition outro handling diff --git a/packages/svelte/src/internal/client/transitions.js b/packages/svelte/src/internal/client/transitions.js index 7097ffff63..68ae725423 100644 --- a/packages/svelte/src/internal/client/transitions.js +++ b/packages/svelte/src/internal/client/transitions.js @@ -691,7 +691,8 @@ function if_block_transition(transition) { transition.f(() => { const c = /** @type {Set} */ (consequent_transitions); c.delete(transition); - if (c.size === 0) { + // If the block has changed to falsy and has transitions + if (!block.v && c.size === 0) { const consequent_effect = block.ce; execute_effect(/** @type {import('./types.js').EffectSignal} */ (consequent_effect)); } @@ -702,7 +703,8 @@ function if_block_transition(transition) { transition.f(() => { const a = /** @type {Set} */ (alternate_transitions); a.delete(transition); - if (a.size === 0) { + // If the block has changed to truthy and has transitions + if (block.v && a.size === 0) { const alternate_effect = block.ae; execute_effect(/** @type {import('./types.js').EffectSignal} */ (alternate_effect)); } diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/Component.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/Component.svelte new file mode 100644 index 0000000000..ae5ddd2d6a --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/Component.svelte @@ -0,0 +1,10 @@ + + +

Outside

+ +{#if show} + +{/if} diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js new file mode 100644 index 0000000000..f80737e8eb --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js @@ -0,0 +1,20 @@ +import { test } from '../../test'; +import { flushSync } from 'svelte'; + +export default test({ + async test({ assert, target, raf }) { + const btn = target.querySelector('button'); + + raf.tick(0); + + flushSync(() => { + btn?.click(); + }); + + assert.htmlEqual(target.innerHTML, `

Outside

`); + + raf.tick(100); + + assert.htmlEqual(target.innerHTML, `

Outside

`); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/main.svelte new file mode 100644 index 0000000000..9f2403ec33 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/main.svelte @@ -0,0 +1,11 @@ + + +{#if shown} + Nothing +{:else} + +{/if} +