fix: transition parameters are not reactive (#9836)

* test: add tests of transitions in new runtime

* fix: move evaluation of props

* format

* add changeset

.changeset/bright-peas-juggle.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+A transition's parameters are now evaluated when the transition is initialized.

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

@@ -421,7 +421,6 @@ function is_transition_block(block) {
 export function bind_transition(dom, get_transition_fn, props_fn, direction, global) {
 	const transition_effect = /** @type {import('./types.js').EffectSignal} */ (current_effect);
 	const block = current_block;
-	const props = props_fn === null ? {} : props_fn();
 
 	let can_show_intro_on_mount = true;
 	let can_apply_lazy_transitions = false;
@@ -467,8 +466,9 @@ export function bind_transition(dom, get_transition_fn, props_fn, direction, glo
 		const transition_fn = get_transition_fn();
 		/** @param {DOMRect} [from] */
 		const init = (from) =>
-			untrack(() =>
-				direction === 'key'
+			untrack(() => {
+				const props = props_fn === null ? {} : props_fn();
+				return direction === 'key'
 					? /** @type {import('./types.js').AnimateFn<any>} */ (transition_fn)(
 							dom,
 							{ from: /** @type {DOMRect} */ (from), to: dom.getBoundingClientRect() },
@@ -477,8 +477,8 @@ export function bind_transition(dom, get_transition_fn, props_fn, direction, glo
 					  )
 					: /** @type {import('./types.js').TransitionFn<any>} */ (transition_fn)(dom, props, {
 							direction
-					  })
-			);
+					  });
+			});
 
 		transition = create_transition(dom, init, direction, transition_effect);
 		const is_intro = direction === 'in';

packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, component, target }) {
+		const div = /** @type {HTMLDivElement & { foo?: number }} */ (target.querySelector('div'));
+
+		assert.equal(div.foo, undefined);
+		component.foo = 2;
+		component.visible = false;
+		assert.equal(div.foo, 2);
+	}
+});

packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	const { visible = true, foo = 1 } = $props();
+
+	function bar(node, params) {
+        node.foo = params;
+		return () => ({});
+	}
+</script>
+
+{#if visible}
+	<div transition:bar={foo}></div>
+{/if}

packages/svelte/tests/runtime-runes/samples/transition-js-initial/_config.js

@@ -0,0 +1,14 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+		raf.tick(0);
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+	}
+});

packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	const { visible = false } = $props();
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}