fix: ensure transitions properly cancel on completion (#9778)

Author: trueadm

.changeset/lazy-masks-sit.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure transitions properly cancel on completion

packages/svelte/src/internal/client/transitions.js

@@ -177,9 +177,12 @@ class TickAnimation {
 	}
 
 	cancel() {
-		const t = this.#reversed ? 1 : 0;
 		active_tick_animations.delete(this);
-		this.#tick_fn(t, 1 - t);
+		const current = this.#current / this.#duration;
+		if (current > 0 && current < 1) {
+			const t = this.#reversed ? 1 : 0;
+			this.#tick_fn(t, 1 - t);
+		}
 	}
 
 	finish() {
@@ -322,7 +325,7 @@ function create_transition(dom, init, direction, effect) {
 
 		animation.onfinish = () => {
 			const is_outro = curr_direction === 'out';
-			/** @type {Animation | TickAnimation} */ (animation).pause();
+			/** @type {Animation | TickAnimation} */ (animation).cancel();
 			if (is_outro) {
 				run_all(subs);
 				subs = [];

packages/svelte/tests/animation-helpers.js

@@ -102,16 +102,18 @@ class Animation {
 	}
 
 	finish() {
+		this.onfinish();
 		this.currentTime = this.#reversed ? 0 : this.#duration;
 		if (this.#reversed) {
 			raf.animations.delete(this);
 		}
-		this.onfinish();
 	}
 
 	cancel() {
-		this._applyKeyFrame(this.#reversed ? this.#keyframes.length - 1 : 0);
-		raf.animations.delete(this);
+		this.#paused = true;
+		if (this.currentTime > 0 && this.currentTime < this.#duration) {
+			this._applyKeyFrame(this.#reversed ? this.#keyframes.length - 1 : 0);
+		}
 	}
 
 	pause() {