another approach

Author: trueadm

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

@@ -445,16 +445,23 @@ function create_transition(dom, init, direction, effect) {
 						payload.css !== undefined &&
 						/** @type {Animation} */ (animation).effect != null
 					) {
+						const transform = getComputedStyle(dom).transform;
 						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);
-						// If we have an existing animation, we need to pause it and create a new animation
-						// with the new frames.
-						animation.pause();
-						create_animation();
+						const current_time = animation.currentTime;
+
+						const keyframes = create_keyframes(
+							easing_fn,
+							css_fn,
+							current_time,
+							direction,
+							true
+						);
+						animation.duration = current_time;
 						// @ts-ignore
 						animation.effect.setKeyframes(keyframes);
+						animation.currentTime = 0;
 					}
 					/** @type {Animation | TickAnimation} */ (animation).reverse();
 				} else {
@@ -655,7 +662,9 @@ export function trigger_transitions(transitions, target_direction, from) {
 			}
 		} else {
 			if (direction === 'out' || direction === 'both') {
-				transition.p = transition.i();
+				if (!transition.p) {
+					transition.p = transition.i();
+				}
 				outros.push(transition.o);
 			}
 			transition.d.inert = true;