diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts index 73af43fd84..63dd6af198 100644 --- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts @@ -298,6 +298,21 @@ export default class EachBlockWrapper extends Wrapper { } `); + const has_transitions = !!(this.else.block.has_intro_method || this.else.block.has_outro_method); + + const destroy_old_block_with_transition = b` + @group_outros(); + @transition_out(${each_block_else}, 1, 1, () => { + ${each_block_else} = null; + }); + @check_outros(); + `; + + const destroy_old_block_without_transition = b` + ${each_block_else}.d(1); + ${each_block_else} = null; + `; + if (this.else.block.has_update_method) { this.updates.push(b` if (!${this.vars.data_length} && ${each_block_else}) { @@ -308,16 +323,14 @@ export default class EachBlockWrapper extends Wrapper { @transition_in(${each_block_else}, 1); ${each_block_else}.m(${update_mount_node}, ${update_anchor_node}); } else if (${each_block_else}) { - ${each_block_else}.d(1); - ${each_block_else} = null; + ${has_transitions ? destroy_old_block_with_transition : destroy_old_block_without_transition} } `); } else { this.updates.push(b` if (${this.vars.data_length}) { if (${each_block_else}) { - ${each_block_else}.d(1); - ${each_block_else} = null; + ${has_transitions ? destroy_old_block_with_transition : destroy_old_block_without_transition} } } else if (!${each_block_else}) { ${each_block_else} = ${this.else.block.name}(#ctx); diff --git a/test/runtime/samples/transitions-trigger-each-else-block/_config.js b/test/runtime/samples/transitions-trigger-each-else-block/_config.js index 1cd15bbe45..126bb0a91a 100644 --- a/test/runtime/samples/transitions-trigger-each-else-block/_config.js +++ b/test/runtime/samples/transitions-trigger-each-else-block/_config.js @@ -5,7 +5,23 @@ export default { component.arr = []; assert.htmlEqual(target.innerHTML, '