fix: improve global transition outro handling (#10474)

.changeset/gentle-dolls-juggle.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve global transition outro handling

packages/svelte/src/internal/client/transitions.js

@@ -691,7 +691,8 @@ function if_block_transition(transition) {
 		transition.f(() => {
 			const c = /** @type {Set<import('./types.js').Transition>} */ (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<import('./types.js').Transition>} */ (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));
 			}

packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/Component.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { fade } from 'svelte/transition';
+	let show = $state(true);
+</script>
+
+<h1>Outside</h1>
+
+{#if show}
+	<button onclick={()=> show = false} transition:fade|global={{ duration: 100 }}>Hide</button>
+{/if}

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, `<h1>Outside</h1><button>Hide</button>`);
+
+		raf.tick(100);
+
+		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	import Component from "./Component.svelte"
+	let shown = $state(false);
+</script>
+
+{#if shown}
+	Nothing
+{:else}
+	<svelte:component this={Component} />
+{/if}
+