diff --git a/.changeset/bright-peas-juggle.md b/.changeset/bright-peas-juggle.md new file mode 100644 index 0000000000..8ef8beaeab --- /dev/null +++ b/.changeset/bright-peas-juggle.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +A transition's parameters are now evaluated when the transition is initialized. diff --git a/packages/svelte/src/internal/client/transitions.js b/packages/svelte/src/internal/client/transitions.js index c1631f8c9a..38225d0346 100644 --- a/packages/svelte/src/internal/client/transitions.js +++ b/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} */ (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} */ (transition_fn)(dom, props, { direction - }) - ); + }); + }); transition = create_transition(dom, init, direction, transition_effect); const is_intro = direction === 'in'; diff --git a/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js new file mode 100644 index 0000000000..f07ed3e0a6 --- /dev/null +++ b/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); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte new file mode 100644 index 0000000000..cf4f5b664e --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte @@ -0,0 +1,12 @@ + + +{#if visible} +
+{/if} \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/transition-js-initial/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-js-initial/_config.js new file mode 100644 index 0000000000..1b85124ce8 --- /dev/null +++ b/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); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte new file mode 100644 index 0000000000..b5241688d4 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte @@ -0,0 +1,16 @@ + + +{#if visible} +
+{/if} \ No newline at end of file