fix: further animation transition improvements

Author: trueadm

.changeset/slow-beds-shave.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: further animation transition improvements

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

@@ -735,6 +735,7 @@ export function destroy_each_item_block(
 	controlled = false
 ) {
 	const transitions = block.s;
+	const dom = block.d;
 
 	if (apply_transitions && transitions !== null) {
 		// We might have pending key transitions, if so remove them first
@@ -750,10 +751,13 @@ export function destroy_each_item_block(
 			if (transition_block !== null) {
 				transition_block.push(block);
 			}
+			if (dom !== null) {
+				// @ts-ignore
+				dom.__animate = false;
+			}
 			return;
 		}
 	}
-	const dom = block.d;
 	if (!controlled && dom !== null) {
 		remove(dom);
 	}

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

@@ -369,6 +369,8 @@ function create_transition(dom, init, direction, effect) {
 		},
 		// out
 		o() {
+			// @ts-ignore
+			const has_keyed_transition = dom.__animate === true;
 			const needs_reverse = direction === 'both' && curr_direction !== 'out';
 			curr_direction = 'out';
 			if (animation === null || cancelled) {
@@ -385,6 +387,29 @@ function create_transition(dom, init, direction, effect) {
 					/** @type {Animation | TickAnimation} */ (animation).play();
 				}
 			}
+			// If we're outroing an element that has an animation, then we need to fix
+			// its position to ensure it behaves nicely without causing layout shift.
+			if (has_keyed_transition) {
+				const style = getComputedStyle(dom);
+				const position = style.position;
+
+				if (position !== 'absolute' && position !== 'fixed') {
+					const { width, height } = style;
+					const a = dom.getBoundingClientRect();
+					dom.style.position = 'absolute';
+
+					dom.style.width = width;
+					dom.style.height = height;
+					const b = dom.getBoundingClientRect();
+					if (a.left !== b.left || a.top !== b.top) {
+						const style = getComputedStyle(dom);
+						const transform = style.transform === 'none' ? '' : style.transform;
+						dom.style.transform = `${transform} translate(${a.left - b.left}px, ${
+							a.top - b.top
+						}px)`;
+					}
+				}
+			}
 		},
 		// cancel
 		c() {
@@ -432,10 +457,16 @@ function is_transition_block(block) {
 export function bind_transition(dom, get_transition_fn, props_fn, direction, global) {
 	const transition_effect = /** @type {import('./types.js').EffectSignal} */ (current_effect);
 	const block = current_block;
+	const is_keyed_transition = direction === 'key';
 
 	let can_show_intro_on_mount = true;
 	let can_apply_lazy_transitions = false;
 
+	if (is_keyed_transition) {
+		// @ts-ignore
+		dom.__animate = true;
+	}
+
 	/** @type {import('./types.js').Block | null} */
 	let transition_block = block;
 	while (transition_block !== null) {
@@ -479,7 +510,7 @@ export function bind_transition(dom, get_transition_fn, props_fn, direction, glo
 		const init = (from) =>
 			untrack(() => {
 				const props = props_fn === null ? {} : props_fn();
-				return direction === 'key'
+				return is_keyed_transition
 					? /** @type {import('./types.js').AnimateFn<any>} */ (transition_fn)(
 							dom,
 							{ from: /** @type {DOMRect} */ (from), to: dom.getBoundingClientRect() },