diff --git a/.changeset/twelve-dragons-join.md b/.changeset/twelve-dragons-join.md new file mode 100644 index 000000000..0beef35ec --- /dev/null +++ b/.changeset/twelve-dragons-join.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: improve each block with animate diff --git a/packages/svelte/src/internal/client/each.js b/packages/svelte/src/internal/client/each.js index ef3e4c81a..80c306017 100644 --- a/packages/svelte/src/internal/client/each.js +++ b/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); } } diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-flip/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-flip/_config.js new file mode 100644 index 000000000..45deb9169 --- /dev/null +++ b/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, + ` +
` + ); + + flushSync(() => { + button.click(); + }); + + assert.htmlEqual( + target.innerHTML, + ` +
` + ); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-flip/main.svelte b/packages/svelte/tests/runtime-legacy/samples/animation-flip/main.svelte new file mode 100644 index 000000000..8ab119404 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/animation-flip/main.svelte @@ -0,0 +1,27 @@ + + + + +
+ {#each todos as todo (todo.id)} + + {/each} +