From 57c09a36282ea3b222f1d0ce43fc064b88c30663 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Thu, 7 Dec 2023 15:38:07 +0000
Subject: [PATCH] fix: improve each key animations

---
 .changeset/fifty-rice-wait.md                      | 5 +++++
 packages/svelte/src/internal/client/each.js        | 8 +++++++-
 packages/svelte/src/internal/client/transitions.js | 4 +++-
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fifty-rice-wait.md

diff --git a/.changeset/fifty-rice-wait.md b/.changeset/fifty-rice-wait.md
new file mode 100644
index 000000000000..1bc58dcfe0ec
--- /dev/null
+++ b/.changeset/fifty-rice-wait.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve each key animations
diff --git a/packages/svelte/src/internal/client/each.js b/packages/svelte/src/internal/client/each.js
index 80c306017165..21911ba97585 100644
--- a/packages/svelte/src/internal/client/each.js
+++ b/packages/svelte/src/internal/client/each.js
@@ -512,7 +512,7 @@ function reconcile_tracked_array(
 					while (i-- > 0) {
 						b_end = i + start;
 						a = sources[i];
-						if (pos === MOVED_BLOCK && a !== LIS_BLOCK) {
+						if (pos === MOVED_BLOCK) {
 							block = b_blocks[b_end];
 							item = array[b_end];
 							update_each_item_block(block, item, b_end, flags);
@@ -726,6 +726,12 @@ function update_each_item_block(block, item, index, type) {
 		if (prev_index !== index && /** @type {number} */ (index) < items.length) {
 			const from_dom = /** @type {Element} */ (get_first_element(block));
 			const from = from_dom.getBoundingClientRect();
+			// Cancel any existing key transitions
+			for (const transition of transitions) {
+				if (transition.r === 'key') {
+					transition.c();
+				}
+			}
 			schedule_task(() => {
 				trigger_transitions(transitions, 'key', from);
 			});
diff --git a/packages/svelte/src/internal/client/transitions.js b/packages/svelte/src/internal/client/transitions.js
index d55dbbba56ab..52d09f39cbf2 100644
--- a/packages/svelte/src/internal/client/transitions.js
+++ b/packages/svelte/src/internal/client/transitions.js
@@ -376,7 +376,9 @@ function create_transition(dom, init, direction, effect) {
 		},
 		// cancel
 		c() {
-			/** @type {Animation | TickAnimation} */ (animation).cancel();
+			if (animation !== null) {
+				/** @type {Animation | TickAnimation} */ (animation).cancel();
+			}
 			cancelled = true;
 		},
 		// cleanup