maintain context for transition (#5392)

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

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;
 	}
 }

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) {

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');
+	}
+};

test/runtime/samples/transition-js-args-dynamic/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	export let visible = false;
+	export let value = 0;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: () => {
+				node.value = value;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo={{value}}></div>
+{/if}