diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js index e3b32b3b9c..41b6e515fb 100644 --- a/packages/svelte/src/internal/client/dom/elements/transitions.js +++ b/packages/svelte/src/internal/client/dom/elements/transitions.js @@ -173,8 +173,12 @@ export function transition(flags, element, get_fn, get_params) { current_animation.finished .then(() => { + if (target === 1) { + current_options = null; + current_animation = null; + } + p = target; - current_animation = current_options = null; callbacks.forEach(run); dispatch_event(element, target === 1 ? 'introend' : 'outroend'); }) @@ -191,9 +195,13 @@ export function transition(flags, element, get_fn, get_params) { current_task = loop((now) => { if (now >= end_time) { + if (target === 1) { + current_task = null; + current_options = null; + } + p = target; tick?.(target, 1 - target); - current_task = current_options = null; callbacks.forEach(run); dispatch_event(element, target === 1 ? 'introend' : 'outroend'); return false; @@ -219,8 +227,6 @@ export function transition(flags, element, get_fn, get_params) { const time = /** @type {number} */ (current_animation.currentTime); const duration = /** @type {number} */ (current_options.duration); p = (Math.abs(current_delta) * time) / duration; - current_animation.cancel(); - current_animation = null; } } @@ -237,6 +243,11 @@ export function transition(flags, element, get_fn, get_params) { callbacks = []; element.inert = inert; + if (current_animation) { + current_animation.cancel(); + current_animation = null; + } + if (intro) { if (current_direction !== TRANSITION_IN) { current_direction = TRANSITION_IN; diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/_config.js index 53b17dd92c..ba518f8773 100644 --- a/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in/_config.js @@ -17,6 +17,7 @@ export default test({ assert.equal(div.style.rotate, '360deg'); raf.tick(75); + // these numbers look wrong because they're not lerped... maybe we should fix that assert.equal(div.style.scale, '0.8333333333333334'); // intro continues while outro plays assert.equal(div.style.opacity, '0.8333333333333334'); @@ -24,8 +25,8 @@ export default test({ component.visible = true; - assert.equal(div.style.scale, '0.8333333333333334'); // reset original styles + assert.equal(div.style.scale, '0'); assert.equal(div.style.opacity, '1'); assert.equal(div.style.rotate, '360deg'); } 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 a333fe2da5..3216f2a898 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,8 +23,6 @@ export default test({ assert.equal(spans[1].foo, 0.25); assert.equal(spans[2].foo, 0.75); - raf.tick(7); - component.things = things; raf.tick(225); @@ -42,8 +40,8 @@ export default test({ target.querySelectorAll('span') ); - assert.equal(spans[0].foo, undefined); - assert.equal(spans[1].foo, undefined); - assert.equal(spans[2].foo, undefined); + assert.equal(spans[0].foo, 1); + assert.equal(spans[1].foo, 1); + assert.equal(spans[2].foo, 1); } });