fix: improve each block with animate (#9839)

.changeset/twelve-dragons-join.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve each block with animate

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

@@ -514,6 +514,7 @@ function reconcile_tracked_array(
 						a = sources[i];
 						if (pos === MOVED_BLOCK && a !== LIS_BLOCK) {
 							block = b_blocks[b_end];
+							item = array[b_end];
 							update_each_item_block(block, item, b_end, flags);
 						}
 					}

packages/svelte/tests/runtime-legacy/samples/animation-flip/_config.js

@@ -0,0 +1,63 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		ok(button);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Shuffle</button><div class="list"><label><input type="checkbox">
+			write
+			some
+			docs</label><label><input type="checkbox">
+			start
+			writing
+			JSConf
+			talk</label><label><input type="checkbox">
+			buy
+			some
+			milk</label><label><input type="checkbox">
+			mow
+			the
+			lawn</label><label><input type="checkbox">
+			feed
+			the
+			turtle</label><label><input type="checkbox">
+			fix
+			some
+			bugs</label></div>`
+		);
+
+		flushSync(() => {
+			button.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Shuffle</button><div class="list"><label><input type="checkbox">
+			 fix
+			 some
+			 bugs</label><label><input type="checkbox">
+			 feed
+			 the
+			 turtle</label><label><input type="checkbox">
+			 mow
+			 the
+			 lawn</label><label><input type="checkbox">
+			 buy
+			 some
+			 milk</label><label><input type="checkbox">
+			 start
+			 writing
+			 JSConf
+			 talk</label><label><input type="checkbox">
+			 write
+			 some
+			 docs</label></div>`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/animation-flip/main.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { flip } from 'svelte/animate';
+
+	let todos = [
+		{ id: 1, done: false, description: 'write some docs' },
+		{ id: 2, done: false, description: 'start writing JSConf talk' },
+		{ id: 3, done: true, description: 'buy some milk' },
+		{ id: 4, done: false, description: 'mow the lawn' },
+		{ id: 5, done: false, description: 'feed the turtle' },
+		{ id: 6, done: false, description: 'fix some bugs' }
+	];
+
+	function update() {
+		todos = Array.from(todos).reverse();
+	}
+</script>
+
+<button on:click={update}>Shuffle</button>
+
+<div class="list">
+	{#each todos as todo (todo.id)}
+		<label animate:flip>
+			<input type="checkbox" bind:checked={todo.done} />
+			{todo.description}
+		</label>
+	{/each}
+</div>