Skip to content

Commit

Permalink
fix else block transition update (#5591)
Browse files Browse the repository at this point in the history
  • Loading branch information
tanhauhau authored Oct 29, 2020
1 parent 169fd84 commit 148b610
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 0 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

* Fix `$$props` and `$$restProps` when compiling to a custom element ([#5482](https://github.com/sveltejs/svelte/issues/5482))
* Fix function calls in `<slot>` props that use contextual values ([#5565](https://github.com/sveltejs/svelte/issues/5565))
* Fix handling aborted transitions in `{:else}` blocks ([#5573](https://github.com/sveltejs/svelte/issues/5573))
* Add `Element` and `Node` to known globals ([#5586](https://github.com/sveltejs/svelte/issues/5586))

## 3.29.4
Expand Down
2 changes: 2 additions & 0 deletions src/compiler/compile/render_dom/wrappers/IfBlock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -447,6 +447,8 @@ export default class IfBlockWrapper extends Wrapper {
if (!${name}) {
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#ctx);
${name}.c();
} else {
${name}.p(#ctx, #dirty);
}
${has_transitions && b`@transition_in(${name}, 1);`}
${name}.m(${update_mount_node}, ${anchor});
Expand Down
31 changes: 31 additions & 0 deletions test/runtime/samples/transition-abort/_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// expect aborting halfway through outro transition
// to behave the same in `{#if}` block as in `{:else}` block
export default {
html: `
<div>a</div>
<div>a</div>
`,

async test({ assert, component, target, window, raf }) {
component.visible = false;

// abort halfway through the outro transition
raf.tick(50);

await component.$set({
visible: true,
array: ['a', 'b', 'c']
});

assert.htmlEqual(target.innerHTML, `
<div>a</div>
<div>b</div>
<div>c</div>
<div>a</div>
<div>b</div>
<div>c</div>
`);
}
};
21 changes: 21 additions & 0 deletions test/runtime/samples/transition-abort/main.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script>
export let array = ['a'];
export let visible = true;
function slide(_, params) {
return params;
}
</script>

{#if visible}
{#each array as item}
<div transition:slide={{duration:100}}>{item}</div>
{/each}
{/if}

{#if !visible}
{:else}
{#each array as item}
<div transition:slide={{duration:100}}>{item}</div>
{/each}
{/if}

0 comments on commit 148b610

Please sign in to comment.