Skip to content

Commit ea6fd72

Browse files
authored
fix: apply animate on prefix/suffix each block mutations (#10965)
1 parent 1c645c3 commit ea6fd72

File tree

2 files changed

+27
-14
lines changed

2 files changed

+27
-14
lines changed

.changeset/three-foxes-relax.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"svelte": patch
3+
---
4+
5+
fix: apply animate on prefix/suffix each block mutations

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

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,8 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
277277

278278
/** @type {import('#client').Effect[]} */
279279
var to_destroy = [];
280+
/** @type {Array<import('#client').EachItem>} */
281+
var to_animate = [];
280282

281283
// Step 1 — trim common suffix
282284
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) {
288290
if (should_update) {
289291
update_item(item, array[b], b, flags);
290292
}
293+
if (is_animated) {
294+
item.a?.measure();
295+
to_animate.push(item);
296+
}
291297
}
292298

293299
// Step 2 — trim common prefix
@@ -299,6 +305,10 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
299305
if (should_update) {
300306
update_item(item, array[start], start, flags);
301307
}
308+
if (is_animated) {
309+
item.a?.measure();
310+
to_animate.push(item);
311+
}
302312

303313
start += 1;
304314
}
@@ -330,8 +340,6 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
330340
map_set(indexes, keys[i], i);
331341
}
332342

333-
/** @type {Array<import('#client').EachItem>} */
334-
var to_animate = [];
335343
if (is_animated) {
336344
// for all items that were in both the old and the new list,
337345
// measure them and store them in `to_animate` so we can
@@ -395,20 +403,20 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
395403

396404
last_item = b_items[b] = item;
397405
}
406+
}
398407

399-
if (to_animate.length > 0) {
400-
// TODO we need to briefly take any outroing elements out of the flow, so that
401-
// we can figure out the eventual destination of the animating elements
402-
// - https://github.com/sveltejs/svelte/pull/10798#issuecomment-2013681778
403-
// - https://svelte.dev/repl/6e891305e9644a7ca7065fa95c79d2d2?version=4.2.9
404-
effect(() => {
405-
untrack(() => {
406-
for (item of to_animate) {
407-
item.a?.apply();
408-
}
409-
});
408+
if (to_animate.length > 0) {
409+
// TODO we need to briefly take any outroing elements out of the flow, so that
410+
// we can figure out the eventual destination of the animating elements
411+
// - https://github.com/sveltejs/svelte/pull/10798#issuecomment-2013681778
412+
// - https://svelte.dev/repl/6e891305e9644a7ca7065fa95c79d2d2?version=4.2.9
413+
effect(() => {
414+
untrack(() => {
415+
for (item of to_animate) {
416+
item.a?.apply();
417+
}
410418
});
411-
}
419+
});
412420
}
413421

414422
pause_effects(to_destroy, () => {

0 commit comments

Comments
 (0)