diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js index 25c46f41b9..57a369fc36 100644 --- a/packages/svelte/src/internal/client/dom/blocks/each.js +++ b/packages/svelte/src/internal/client/dom/blocks/each.js @@ -59,7 +59,7 @@ function pause_effects(items, paused, controlled_anchor) { transitions_count = transitions.length; pause_children(item.e, transitions, true); if (transitions_count !== transitions.length) { - paused.set(item.k === null ? item.i : item.k, item); + paused.set(item.k, item); } } @@ -75,7 +75,7 @@ function pause_effects(items, paused, controlled_anchor) { run_out_transitions(transitions, () => { for (var i = 0; i < length; i++) { - paused.delete(item.k === null ? item.i : item.k); + paused.delete(item.k); destroy_effect(items[i].e); } }); @@ -266,6 +266,8 @@ function reconcile_indexed_array(array, state, anchor, render_fn, flags) { value = array[i]; item = a_items[i]; b_items[i] = item; + // Indexed each blocks use the value as the key + item.k = value; update_item(item, value, i, flags); resume_effect(item.e); } @@ -274,11 +276,11 @@ function reconcile_indexed_array(array, state, anchor, render_fn, flags) { // add items for (; i < b; i += 1) { value = array[i]; - item = paused.get(i); + item = paused.get(value); if (item === undefined || item.e.dom === null) { - paused.delete(i); - item = create_item(anchor, value, null, i, render_fn, flags); + paused.delete(value); + item = create_item(anchor, value, value, i, render_fn, flags); } else { resume_effect(item.e); move(/** @type {import('#client').Dom} */ (item.e.dom), anchor); diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js index 5a89edc899..90de4dae7b 100644 --- a/packages/svelte/src/internal/client/dom/elements/transitions.js +++ b/packages/svelte/src/internal/client/dom/elements/transitions.js @@ -311,6 +311,7 @@ function animate(element, options, counterpart, t2, callback) { if (animation.startTime !== null && animation.currentTime !== null) { throw e; } + callback?.(); }); } else { // Timer diff --git a/packages/svelte/tests/animation-helpers.js b/packages/svelte/tests/animation-helpers.js index 44fb2c45ef..8244081332 100644 --- a/packages/svelte/tests/animation-helpers.js +++ b/packages/svelte/tests/animation-helpers.js @@ -123,12 +123,14 @@ class Animation { if (this.currentTime > 0 && this.currentTime < this.#duration) { this.#apply_keyframe(0); } - // @ts-ignore - this.currentTime = null; - // @ts-ignore - this.startTime = null; - this.#cancelled(); - raf.animations.delete(this); + if (this.currentTime !== null && this.startTime !== null) { + // @ts-ignore + this.currentTime = null; + // @ts-ignore + this.startTime = null; + this.#cancelled(); + raf.animations.delete(this); + } } } diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-aborted-outro-in-each/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-aborted-outro-in-each/_config.js index 3216f2a898..85eae521b9 100644 --- a/packages/svelte/tests/runtime-legacy/samples/transition-js-aborted-outro-in-each/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-aborted-outro-in-each/_config.js @@ -23,6 +23,7 @@ export default test({ assert.equal(spans[1].foo, 0.25); assert.equal(spans[2].foo, 0.75); + debugger; component.things = things; raf.tick(225);