allow parameterised transitions - fixes #962

src/generators/Generator.ts

@@ -755,6 +755,11 @@ export default class Generator {
 					});
 					this.skip();
 				}
+
+				if (node.type === 'Transition' && node.expression) {
+					node.metadata = contextualise(node.expression, contextDependencies, indexes);
+					this.skip();
+				}
 			},
 
 			leave(node: Node, parent: Node) {

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

@@ -21,7 +21,7 @@ export default function addTransitions(
 	if (intro === outro) {
 		const name = block.getUniqueName(`${node.var}_transition`);
 		const snippet = intro.expression
-			? intro.expression.metadata.snippet
+			? intro.metadata.snippet
 			: '{}';
 
 		block.addVariable(name);
@@ -51,7 +51,7 @@ export default function addTransitions(
 		if (intro) {
 			block.addVariable(introName);
 			const snippet = intro.expression
-				? intro.expression.metadata.snippet
+				? intro.metadata.snippet
 				: '{}';
 
 			const fn = `%transitions-${intro.name}`; // TODO add built-in transitions?
@@ -76,7 +76,7 @@ export default function addTransitions(
 		if (outro) {
 			block.addVariable(outroName);
 			const snippet = outro.expression
-				? intro.expression.metadata.snippet
+				? outro.metadata.snippet
 				: '{}';
 
 			const fn = `%transitions-${outro.name}`;

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

@@ -0,0 +1,19 @@
+export default {
+	solo: true,
+
+	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/main.html

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