fix

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;

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');
 	}

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);
 	}
 });