Merge pull request #970 from sveltejs/gh-962-again

don't transform bidi transitions twice

src/generators/dom/visitors/Element/addTransitions.ts

@@ -15,10 +15,9 @@ export default function addTransitions(
 
 	if (!intro && !outro) return;
 
-	if (intro) block.contextualise(intro.expression); // TODO remove all these
-	if (outro) block.contextualise(outro.expression);
-
 	if (intro === outro) {
+		block.contextualise(intro.expression); // TODO remove all these
+
 		const name = block.getUniqueName(`${node.var}_transition`);
 		const snippet = intro.expression
 			? intro.metadata.snippet
@@ -49,6 +48,8 @@ export default function addTransitions(
 		const outroName = outro && block.getUniqueName(`${node.var}_outro`);
 
 		if (intro) {
+			block.contextualise(intro.expression);
+
 			block.addVariable(introName);
 			const snippet = intro.expression
 				? intro.metadata.snippet
@@ -74,6 +75,8 @@ export default function addTransitions(
 		}
 
 		if (outro) {
+			block.contextualise(outro.expression);
+
 			block.addVariable(outroName);
 			const snippet = outro.expression
 				? outro.metadata.snippet

test/runtime/samples/transition-js-parameterised-with-state/_config.js

@@ -0,0 +1,21 @@
+export default {
+	data: {
+		duration: 200
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ visible: true });
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 100);
+
+		raf.tick(100);
+		assert.equal(div.foo, 200);
+
+		raf.tick(101);
+
+		component.destroy();
+	},
+};

test/runtime/samples/transition-js-parameterised-with-state/main.html

@@ -0,0 +1,18 @@
+{{#if visible}}
+	<div transition:foo='{k: duration}'>fades in</div>
+{{/if}}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t * params.k;
+					}
+				};
+			}
+		}
+	};
+</script>