fix else block transition update (sveltejs#5591)

CHANGELOG.md

@@ -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

src/compiler/compile/render_dom/wrappers/IfBlock.ts

@@ -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});

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

@@ -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>
+		`);
+	}
+};

test/runtime/samples/transition-abort/main.svelte

@@ -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}