fix: handle intro global transition propagation correctly (#9515)

* fix: stop propagating global intros

* fix: stop propagating global intros

* add test

Author: trueadm

.changeset/shiny-shrimps-march.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: do not propagate global intro transitions

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

@@ -460,7 +460,8 @@ export function bind_transition(dom, transition_fn, props_fn, direction, global)
 			);
 
 		transition = create_transition(dom, init, direction, transition_effect);
-		const show_intro = !skip_intro && (direction === 'in' || direction === 'both');
+		const is_intro = direction === 'in';
+		const show_intro = !skip_intro && (is_intro || direction === 'both');
 
 		if (show_intro) {
 			transition.payload = transition.init();
@@ -484,6 +485,7 @@ export function bind_transition(dom, transition_fn, props_fn, direction, global)
 					}
 					if (
 						parent === null ||
+						is_intro ||
 						(!global &&
 							(transition_block.type !== IF_BLOCK || parent.type !== IF_BLOCK || parent.current))
 					) {

packages/svelte/tests/runtime-legacy/samples/key-block-transition-global/_config.js

@@ -0,0 +1,25 @@
+import { flushSync } from '../../../../src/main/main-client';
+import { test } from '../../test';
+
+export default test({
+	html: '<div>0</div><button>toggle</button>',
+	async test({ assert, component, target, raf }) {
+		component.value = 2;
+
+		const [button] = /** @type {NodeListOf<HTMLButtonElement>} */ (
+			target.querySelectorAll('button')
+		);
+
+		raf.tick(0);
+
+		assert.htmlEqual(target.innerHTML, '<div>2</div><button>toggle</button>');
+
+		flushSync(() => {
+			button.click();
+		});
+
+		raf.tick(0);
+
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button>');
+	}
+});

packages/svelte/tests/runtime-legacy/samples/key-block-transition-global/main.svelte

@@ -0,0 +1,22 @@
+<script>
+	export let value = 0;
+	export let toggle = true;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: (t, u) => {
+				node.foo = t;
+				node.oof = u;
+			}
+		};
+	}
+</script>
+
+{#if toggle}
+	{#key value}
+		<div in:foo|global>{value}</div>
+	{/key}
+{/if}
+
+<button on:click={() => toggle = !toggle}>toggle</button>