fix: measure elements before taking siblings out of the flow

Author: Rich-Harris

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

@@ -24,7 +24,7 @@ import {
 } from '../../reactivity/effects.js';
 import { source, mutable_source, set } from '../../reactivity/sources.js';
 import { is_array, is_frozen } from '../../utils.js';
-import { STATE_SYMBOL } from '../../constants.js';
+import { INERT, STATE_SYMBOL } from '../../constants.js';
 
 /**
  * The row of a keyed each block that is currently updating. We track this
@@ -238,8 +238,8 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 	/** @type {import('#client').EachState | import('#client').EachItem} */
 	var prev = state;
 
-	/** @type {import('#client').EachItem[]} */
-	var to_animate = [];
+	/** @type {Set<import('#client').EachItem>} */
+	var to_animate = new Set();
 
 	/** @type {import('#client').EachItem[]} */
 	var matched = [];
@@ -267,7 +267,7 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 
 			if (item !== undefined) {
 				item.a?.measure();
-				to_animate.push(item);
+				to_animate.add(item);
 			}
 		}
 	}
@@ -302,7 +302,13 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 			update_item(item, value, i, flags);
 		}
 
-		resume_effect(item.e);
+		if ((item.e.f & INERT) !== 0) {
+			resume_effect(item.e);
+			if (is_animated) {
+				item.a?.unfix();
+				to_animate.delete(item);
+			}
+		}
 
 		if (item !== current) {
 			if (seen.has(item)) {
@@ -380,6 +386,16 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 
 	var controlled_anchor = (flags & EACH_IS_CONTROLLED) !== 0 && length === 0 ? anchor : null;
 
+	if (is_animated) {
+		for (var i = 0; i < to_destroy.length; i += 1) {
+			to_destroy[i].a?.measure();
+		}
+
+		for (var i = 0; i < to_destroy.length; i += 1) {
+			to_destroy[i].a?.fix();
+		}
+	}
+
 	pause_effects(to_destroy, controlled_anchor, () => {
 		for (var i = 0; i < to_destroy.length; i += 1) {
 			var item = to_destroy[i];

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

@@ -88,6 +88,9 @@ export function animation(element, get_fn, get_params) {
 	/** @type {import('#client').Animation | undefined} */
 	var animation;
 
+	/** @type {null | { position: string, width: string, height: string }} */
+	var original_styles = null;
+
 	item.a ??= {
 		element,
 		measure() {
@@ -111,6 +114,38 @@ export function animation(element, get_fn, get_params) {
 					animation = undefined;
 				});
 			}
+		},
+		fix() {
+			var computed_style = getComputedStyle(element);
+
+			if (computed_style.position !== 'absolute' && computed_style.position !== 'fixed') {
+				var style = /** @type {HTMLElement | SVGElement} */ (element).style;
+
+				original_styles = {
+					position: style.position,
+					width: style.width,
+					height: style.height
+				};
+
+				style.position = 'absolute';
+				style.width = computed_style.width;
+				style.height = computed_style.height;
+				var to = element.getBoundingClientRect();
+
+				if (from.left !== to.left || from.top !== to.top) {
+					var transform = `translate(${from.left - to.left}px, ${from.top - to.top}px)`;
+					style.transform = style.transform ? `${style.transform} ${transform}` : transform;
+				}
+			}
+		},
+		unfix() {
+			if (original_styles) {
+				var style = /** @type {HTMLElement | SVGElement} */ (element).style;
+
+				style.position = original_styles.position;
+				style.width = original_styles.width;
+				style.height = original_styles.height;
+			}
 		}
 	};
 
@@ -305,6 +340,10 @@ function animate(element, options, counterpart, t2, callback) {
 		animation.finished
 			.then(() => {
 				callback?.();
+
+				if (t2 === 1) {
+					animation.cancel();
+				}
 			})
 			.catch((e) => {
 				// Error for DOMException: The user aborted a request. This results in two things:

packages/svelte/src/internal/client/types.d.ts

@@ -89,6 +89,10 @@ export interface AnimationManager {
 	measure: () => void;
 	/** Called during keyed each block reconciliation, after updates — this triggers the animation */
 	apply: () => void;
+	/** Fix the element position, so that siblings can move to the correct destination */
+	fix: () => void;
+	/** Unfix the element position if the outro is aborted */
+	unfix: () => void;
 }
 
 export interface Animation {