diff --git a/CHANGELOG.md b/CHANGELOG.md index ae228a3b0a..b4ffb19d3c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * Fix specificity of certain styles involving a child selector ([#4795](https://github.com/sveltejs/svelte/issues/4795)) +* Fix transitions that are parameterised with stores ([#5244](https://github.com/sveltejs/svelte/issues/5244)) * Fix scoping of styles involving child selector and `*` ([#5370](https://github.com/sveltejs/svelte/issues/5370)) ## 3.25.0 diff --git a/src/compiler/compile/nodes/Transition.ts b/src/compiler/compile/nodes/Transition.ts index a680fde46e..983a6ee6c7 100644 --- a/src/compiler/compile/nodes/Transition.ts +++ b/src/compiler/compile/nodes/Transition.ts @@ -34,7 +34,7 @@ export default class Transition extends Node { } this.expression = info.expression - ? new Expression(component, this, scope, info.expression, true) + ? new Expression(component, this, scope, info.expression) : null; } } diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 2e35f0271f..f740560bcd 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -868,6 +868,10 @@ export default class ElementWrapper extends Wrapper { block.chunks.destroy.push(b`if (detaching && ${outro_name}) ${outro_name}.end();`); } } + + if ((intro && intro.expression && intro.expression.dependencies.size) || (outro && outro.expression && outro.expression.dependencies.size)) { + block.maintain_context = true; + } } add_animation(block: Block) { diff --git a/test/runtime/samples/transition-js-args-dynamic/_config.js b/test/runtime/samples/transition-js-args-dynamic/_config.js new file mode 100644 index 0000000000..513a17486a --- /dev/null +++ b/test/runtime/samples/transition-js-args-dynamic/_config.js @@ -0,0 +1,15 @@ +export default { + test({ assert, component, target, window, raf }) { + component.visible = true; + + const div = target.querySelector('div'); + + assert.equal(div.value, 0); + + raf.tick(200); + + div.value = 'test'; + component.visible = false; + assert.equal(div.value, 'test'); + } +}; diff --git a/test/runtime/samples/transition-js-args-dynamic/main.svelte b/test/runtime/samples/transition-js-args-dynamic/main.svelte new file mode 100644 index 0000000000..1bb149de32 --- /dev/null +++ b/test/runtime/samples/transition-js-args-dynamic/main.svelte @@ -0,0 +1,17 @@ + + +{#if visible} +
+{/if} \ No newline at end of file