fix: improve each key animations (#9842)

sveltejs · Dec 7, 2023 · 8dfb289 · 8dfb289 · vercel · Dec 7, 2023
1 parent 08d93a2
commit 8dfb289
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/fifty-rice-wait.md 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
@@ -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
@@ -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