diff --git a/src/compile/dom/Block.ts b/src/compile/dom/Block.ts index 977486bd8d..31a01b6eb3 100644 --- a/src/compile/dom/Block.ts +++ b/src/compile/dom/Block.ts @@ -169,9 +169,11 @@ export default class Block { toString() { const { dev } = this.compiler.options; + const properties = new CodeBuilder(); if (this.hasIntroMethod || this.hasOutroMethod) { this.addVariable('#current'); + properties.addBlock(`cr(){ return #current; },`); if (!this.builders.mount.isEmpty()) { this.builders.mount.addLine(`#current = true;`); @@ -186,8 +188,6 @@ export default class Block { this.builders.mount.addLine(`${this.autofocus}.focus();`); } - const properties = new CodeBuilder(); - let localKey; if (this.key) { localKey = this.getUniqueName('key'); diff --git a/src/compile/nodes/IfBlock.ts b/src/compile/nodes/IfBlock.ts index 730128fc71..cac0c78d4b 100644 --- a/src/compile/nodes/IfBlock.ts +++ b/src/compile/nodes/IfBlock.ts @@ -301,7 +301,7 @@ export default class IfBlock extends Node { const updateMountNode = this.getUpdateMountNode(anchor); const destroyOldBlock = deindent` - @groupOutros(); + if(${name}.cr()) @groupOutros(); ${name}.o(function() { ${if_blocks}[${previous_block_index}].d(1); ${if_blocks}[${previous_block_index}] = null; @@ -423,7 +423,7 @@ export default class IfBlock extends Node { // as that will typically result in glitching const exit = branch.hasOutroMethod ? deindent` - @groupOutros(); + if(${name}.cr()) @groupOutros(); ${name}.o(function() { ${name}.d(1); ${name} = null; diff --git a/test/runtime/samples/transition-js-if-block-outro-timeout/_config.js b/test/runtime/samples/transition-js-if-block-outro-timeout/_config.js new file mode 100644 index 0000000000..cacc88669d --- /dev/null +++ b/test/runtime/samples/transition-js-if-block-outro-timeout/_config.js @@ -0,0 +1,22 @@ +export default { + test ( assert, component, target, window, raf ) { + component.set({ visible: true }); + const div = target.querySelector('div'); + + component.set({ visible: false }); + assert.equal(window.getComputedStyle(div).opacity, 1); + + raf.tick(200); + assert.equal(window.getComputedStyle(div).opacity, 0.5); + component.set({ blabla: false }); + + raf.tick(400); + assert.equal(window.getComputedStyle(div).opacity, 0); + + raf.tick(600); + assert.equal(component.refs.div, undefined); + assert.equal(target.querySelector('div'), undefined); + + component.destroy(); + } +}; \ No newline at end of file diff --git a/test/runtime/samples/transition-js-if-block-outro-timeout/main.html b/test/runtime/samples/transition-js-if-block-outro-timeout/main.html new file mode 100644 index 0000000000..7b627a9f72 --- /dev/null +++ b/test/runtime/samples/transition-js-if-block-outro-timeout/main.html @@ -0,0 +1,18 @@ +{#if visible} +
yes
+{/if} + + \ No newline at end of file