fix: improve transition outro effect

Author: trueadm

.changeset/smart-waves-march.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve transition outro effect

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

@@ -437,21 +437,21 @@ function create_transition(dom, init, direction, effect) {
 				dispatch_event(dom, 'outrostart');
 				if (needs_reverse) {
 					const payload = transition.p;
-					const current_animation = /** @type {Animation} */ (animation);
 					// If we are working with CSS animations, then before we call reverse, we also need to ensure
 					// that we reverse the easing logic. To do this we need to re-create the keyframes so they're
 					// in reverse with easing properly reversed too.
-					if (
-						payload !== null &&
-						payload.css !== undefined &&
-						current_animation.playState === 'idle'
-					) {
+					if (payload !== null && payload.css !== undefined) {
 						const duration = payload.duration ?? 300;
 						const css_fn = payload.css;
 						const easing_fn = payload.easing || linear;
 						const keyframes = create_keyframes(easing_fn, css_fn, duration, direction, true);
+						const current_animation = /** @type {Animation} */ (animation);
 						const effect = current_animation.effect;
-						if (effect !== null) {
+						if (effect != null) {
+							// If we have an existing animation, we need to pause it and create a new animation
+							// with the new frames.
+							animation.pause();
+							create_animation();
 							// @ts-ignore
 							effect.setKeyframes(keyframes);
 						}

packages/svelte/tests/animation-helpers.js

@@ -53,18 +53,11 @@ class Animation {
 		this.onfinish = () => {};
 		this.pending = true;
 		this.currentTime = 0;
-		this.playState = 'running';
-		this.effect = {
-			setKeyframes: (/** @type {Keyframe[]} */ keyframes) => {
-				this.#keyframes = keyframes;
-			}
-		};
 	}
 
 	play() {
 		this.#paused = false;
 		raf.animations.add(this);
-		this.playState = 'running';
 		this._update();
 	}
 
@@ -114,7 +107,6 @@ class Animation {
 		if (this.#reversed) {
 			raf.animations.delete(this);
 		}
-		this.playState = 'idle';
 	}
 
 	cancel() {
@@ -126,13 +118,11 @@ class Animation {
 
 	pause() {
 		this.#paused = true;
-		this.playState = 'paused';
 	}
 
 	reverse() {
 		this.#timeline_offset = this.currentTime;
 		this.#reversed = !this.#reversed;
-		this.playState = 'running';
 	}
 }
 

packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js

@@ -18,7 +18,7 @@ export default test({
 		raf.tick(150);
 		assert.htmlEqual(
 			target.innerHTML,
-			'<p>foo</p><p class="red svelte-1yszte8 border" style="overflow: hidden; opacity: 0; border-top-width: 0.5000600024000317px; border-bottom-width: 0.5000600024000317px;">bar</p>'
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="overflow: hidden; opacity: 0; border-top-width: 3.4999399975999683px; border-bottom-width: 3.4999399975999683px;">bar</p>'
 		);
 		component.open = true;
 		raf.tick(250);