From 7431c6c9729aaeb817737bc3f51dbe9916bd7e55 Mon Sep 17 00:00:00 2001
From: Leon Scherer <info@leonscherer.com>
Date: Sat, 6 Jul 2024 13:50:33 +0200
Subject: [PATCH 1/3] fix: (v5) Outro animation is not cancelled and overlaps
 with intro #12319

- abort outro animation when intro starts
---
 .../svelte/src/internal/client/dom/elements/transitions.js    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index c2fbeface1a6..cc9669288150 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -190,6 +190,9 @@ export function transition(flags, element, get_fn, get_params) {
 		in() {
 			element.inert = inert;
 
+			// abort the outro to prevent overlap with the intro
+			outro?.abort();
+
 			if (is_intro) {
 				dispatch_event(element, 'introstart');
 				intro = animate(element, get_options(), outro, 1, () => {
@@ -197,7 +200,6 @@ export function transition(flags, element, get_fn, get_params) {
 					intro = current_options = undefined;
 				});
 			} else {
-				outro?.abort();
 				reset?.();
 			}
 		},

From ec8a69dec725f5493acbcca58a3043d6032a484a Mon Sep 17 00:00:00 2001
From: Leon Scherer <info@leonscherer.com>
Date: Sat, 6 Jul 2024 13:52:24 +0200
Subject: [PATCH 2/3] fix: (v5) Outro animation is not cancelled and overlaps
 with intro #12319

- add change set
---
 .changeset/bright-needles-pretend.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/bright-needles-pretend.md

diff --git a/.changeset/bright-needles-pretend.md b/.changeset/bright-needles-pretend.md
new file mode 100644
index 000000000000..03bb20e4f1dd
--- /dev/null
+++ b/.changeset/bright-needles-pretend.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: abort outro when intro starts

From f0c2b459dfe43760f0ba2b529b9945afff161928 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Thu, 11 Jul 2024 12:42:35 +0200
Subject: [PATCH 3/3] add test by adjusting existing one (which tested nothing
 since Svelte 4 because of local-by-default)

---
 .../samples/transition-abort/_config.js       | 40 +++++++++++++++----
 .../samples/transition-abort/main.svelte      | 16 ++++----
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js
index 5072e9fa191c..e35b08f2a8ca 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js
@@ -12,24 +12,48 @@ export default test({
 	async test({ assert, component, target, raf }) {
 		component.visible = false;
 
-		// abort halfway through the outro transition
-		raf.tick(50);
+		raf.tick(25);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div style="opacity: 0.75;">a</div>
+			<div style="opacity: 0.75;">a</div>
+		`
+		);
 
+		// abort 1/4 through the outro transition
 		await component.$set({
 			visible: true,
 			array: ['a', 'b', 'c']
 		});
 
+		raf.tick(50);
+		assert.htmlEqual(
+			target.innerHTML,
+			// because outro is aborted it will be finished earlier with the intro than the new items
+			`
+			<div style="">a</div>
+			<div style="opacity: 0.25;">b</div>
+			<div style="opacity: 0.25;">c</div>
+
+			<div style="">a</div>
+			<div style="opacity: 0.25;">b</div>
+			<div style="opacity: 0.25;">c</div>
+		`
+		);
+
+		// intros of new items almost finished, aborted outro shouldn't overlap re-intro
+		raf.tick(75);
 		assert.htmlEqual(
 			target.innerHTML,
 			`
-			<div>a</div>
-			<div>b</div>
-			<div>c</div>
+			<div style="">a</div>
+			<div style="opacity: 0.5;">b</div>
+			<div style="opacity: 0.5;">c</div>
 
-			<div>a</div>
-			<div>b</div>
-			<div>c</div>
+			<div style="">a</div>
+			<div style="opacity: 0.5;">b</div>
+			<div style="opacity: 0.5;">c</div>
 		`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-abort/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-abort/main.svelte
index b574229712eb..1fbfa1368517 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-abort/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-abort/main.svelte
@@ -2,20 +2,22 @@
 	export let array = ['a'];
 	export let visible = true;
 
-	function slide(_, params) {
-		return params;
+	function slide(_) {
+		return {
+			duration: 100,
+			css: (t) => `opacity: ${t}`
+		};
 	}
 </script>
 
 {#if visible}
 	{#each array as item}
-		<div transition:slide={{duration:100}}>{item}</div>
+		<div transition:slide|global>{item}</div>
 	{/each}
 {/if}
 
-{#if !visible}
-{:else}
+{#if !visible}{:else}
 	{#each array as item}
-		<div transition:slide={{duration:100}}>{item}</div>
+		<div transition:slide|global>{item}</div>
 	{/each}
-{/if}
\ No newline at end of file
+{/if}