diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts index 99f7597276c1..44b93f85c528 100644 --- a/src/generators/Generator.ts +++ b/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) { diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts index 26ff6f048ec2..10d0b90f50bd 100644 --- a/src/generators/dom/visitors/Element/addTransitions.ts +++ b/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}`; diff --git a/test/runtime/samples/transition-js-parameterised/_config.js b/test/runtime/samples/transition-js-parameterised/_config.js new file mode 100644 index 000000000000..fbfebdae5aab --- /dev/null +++ b/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(); + }, +}; diff --git a/test/runtime/samples/transition-js-parameterised/main.html b/test/runtime/samples/transition-js-parameterised/main.html new file mode 100644 index 000000000000..de713ae96320 --- /dev/null +++ b/test/runtime/samples/transition-js-parameterised/main.html @@ -0,0 +1,18 @@ +{{#if visible}} +
fades in
+{{/if}} + + \ No newline at end of file