fix: defer animations (#12453)

* run animations in microtask

* skip troublesome test

* fix test

* changeset

.changeset/yellow-bananas-rhyme.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: run animations in microtask so that deferred transitions can measure nodes correctly

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

@@ -303,13 +303,13 @@ function animate(element, options, counterpart, t2, callback) {
 		};
 	}
 
-	var { delay = 0, duration, css, tick, easing = linear } = options;
+	const { delay = 0, css, tick, easing = linear } = options;
 
 	var start = raf.now() + delay;
 	var t1 = counterpart?.t(start) ?? 1 - t2;
 	var delta = t2 - t1;
 
-	duration *= Math.abs(delta);
+	var duration = options.duration * Math.abs(delta);
 	var end = start + duration;
 
 	/** @type {Animation} */
@@ -319,6 +319,7 @@ function animate(element, options, counterpart, t2, callback) {
 	var task;
 
 	if (css) {
+		queue_micro_task(() => {
 			// WAAPI
 			var keyframes = [];
 			var n = Math.ceil(duration / (1000 / 60)); // `n` must be an integer, or we risk missing the `t2` value
@@ -365,6 +366,7 @@ function animate(element, options, counterpart, t2, callback) {
 						throw e;
 					}
 				});
+		});
 	} else {
 		// Timer
 		if (t1 === 0) {

packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in-with-param/_config.js

@@ -6,16 +6,19 @@ export default test({
 		const div = target.querySelector('div');
 		ok(div);
 
-		assert.equal(div.style.opacity, '0');
+		assert.equal(div.style.color, 'blue');
 
 		component.visible = false;
-		assert.equal(div.style.opacity, '1');
+		assert.equal(div.style.color, 'yellow');
 
 		// change param
 		raf.tick(1);
 		component.param = true;
 		component.visible = true;
 
-		assert.equal(div.style.opacity, '1');
+		assert.equal(div.style.color, 'red');
+
+		component.visible = false;
+		assert.equal(div.style.color, 'green');
 	}
 });

packages/svelte/tests/runtime-legacy/samples/transition-css-in-out-in-with-param/main.svelte

@@ -4,18 +4,18 @@
 
 	function getInParam() {
 		return {
-			duration: param ? 20 : 10,
+			duration: 100,
-			css: t => {
+			css: (t) => {
-				return `opacity: ${t}`;
+				return `color: ${param ? 'red' : 'blue'}`;
 			}
 		};
 	}
 
 	function getOutParam() {
 		return {
-			duration: param ? 15 : 5,
+			duration: 100,
-			css: t => {
+			css: (t) => {
-				return `opacity: ${t}`;
+				return `color: ${param ? 'green' : 'yellow'}`;
 			}
 		};
 	}