From e1439647ecc4965b4eb835b709c8150a35e70392 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 29 Jul 2024 17:11:58 +0200
Subject: [PATCH] fix: get animation params before switching elements

---
 .../src/internal/client/dom/elements/transitions.js    | 10 +++++++++-
 .../samples/animation-js-delay/_config.js              |  8 +++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index 5d0005b2c1..d14dcc72d9 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -73,6 +73,9 @@ export function animation(element, get_fn, get_params) {
 	/** @type {DOMRect} */
 	var to;
 
+	/** @type {P | undefined} */
+	var params;
+
 	/** @type {Animation | undefined} */
 	var animation;
 
@@ -83,6 +86,10 @@ export function animation(element, get_fn, get_params) {
 		element,
 		measure() {
 			from = this.element.getBoundingClientRect();
+			// get params now, in case they depend on the list item's position. Example:
+			// If A and B switch position and the animation is like `animate:flip={{ delay: itemIdx * 50 }}`
+			// then we want `itemIdx` to be the index before the switch for both A and B
+			params = get_params?.();
 		},
 		apply() {
 			animation?.abort();
@@ -95,7 +102,7 @@ export function animation(element, get_fn, get_params) {
 				from.top !== to.top ||
 				from.bottom !== to.bottom
 			) {
-				const options = get_fn()(this.element, { from, to }, get_params?.());
+				const options = get_fn()(this.element, { from, to }, params);
 
 				animation = animate(
 					this.element,
@@ -422,6 +429,7 @@ function animate(element, options, counterpart, t2, on_finish, on_abort) {
 		}
 
 		task = loop((now) => {
+			console.log(now, start, end, delay);
 			if (now >= end) {
 				tick?.(t2, 1 - t2);
 				on_finish?.();
diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-js-delay/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-js-delay/_config.js
index a72aed883b..d2ef1b0d51 100644
--- a/packages/svelte/tests/runtime-legacy/samples/animation-js-delay/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/animation-js-delay/_config.js
@@ -1,9 +1,6 @@
-// @ts-nocheck
-import { ok, test } from '../../test';
+import { test } from '../../test';
 
 export default test({
-	skip: true, // TODO: needs fixing
-
 	get props() {
 		return {
 			things: [
@@ -25,7 +22,7 @@ export default test({
 	`,
 
 	test({ assert, component, window, raf }) {
-		let divs = window.document.querySelectorAll('div');
+		let divs = /** @type {NodeListOf<any>} */ (window.document.querySelectorAll('div'));
 		divs.forEach((div) => {
 			div.getBoundingClientRect = function () {
 				const index = [...this.parentNode.children].indexOf(this);
@@ -52,6 +49,7 @@ export default test({
 		assert.equal(divs[0].dy, 120);
 		assert.equal(divs[4].dy, -120);
 
+		console.log('tick 50');
 		raf.tick(50);
 		assert.equal(divs[0].dy, 108);
 		assert.equal(divs[4].dy, -60);