fix: apply animate on prefix/suffix each block mutations (#10965)

.changeset/three-foxes-relax.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: apply animate on prefix/suffix each block mutations

packages/svelte/src/internal/client/dom/blocks/each.js

@@ -277,6 +277,8 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
 
 	/** @type {import('#client').Effect[]} */
 	var to_destroy = [];
+	/** @type {Array<import('#client').EachItem>} */
+	var to_animate = [];
 
 	// Step 1 — trim common suffix
 	while (a > 0 && b > 0 && a_items[a - 1].k === keys[b - 1]) {
@@ -288,6 +290,10 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
 		if (should_update) {
 			update_item(item, array[b], b, flags);
 		}
+		if (is_animated) {
+			item.a?.measure();
+			to_animate.push(item);
+		}
 	}
 
 	// Step 2 — trim common prefix
@@ -299,6 +305,10 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
 		if (should_update) {
 			update_item(item, array[start], start, flags);
 		}
+		if (is_animated) {
+			item.a?.measure();
+			to_animate.push(item);
+		}
 
 		start += 1;
 	}
@@ -330,8 +340,6 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
 			map_set(indexes, keys[i], i);
 		}
 
-		/** @type {Array<import('#client').EachItem>} */
-		var to_animate = [];
 		if (is_animated) {
 			// for all items that were in both the old and the new list,
 			// measure them and store them in `to_animate` so we can
@@ -395,6 +403,7 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
 
 			last_item = b_items[b] = item;
 		}
+	}
 
 	if (to_animate.length > 0) {
 		// TODO we need to briefly take any outroing elements out of the flow, so that
@@ -409,7 +418,6 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
 			});
 		});
 	}
-	}
 
 	pause_effects(to_destroy, () => {
 		state.items = b_items;