day swap animation

src/lib/utils/day-swap.ts

@@ -0,0 +1,31 @@
+/**
+ * Fades a block back in whenever the value passed to it changes - used to make
+ * a day switch visible in the hourly table, the written forecast and the
+ * meteograms.
+ *
+ * It animates the existing node instead of remounting it: the meteograms hold
+ * canvas charts with their own zoom state, and rebuilding those on every day
+ * change would be both expensive and lossy.
+ */
+export function daySwap(node: HTMLElement, key: unknown) {
+	let current = key;
+
+	const play = () => {
+		if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+		node.animate(
+			[
+				{ opacity: 0.15, transform: 'translateY(4px)' },
+				{ opacity: 1, transform: 'translateY(0)' }
+			],
+			{ duration: 280, easing: 'cubic-bezier(0.22, 0.61, 0.36, 1)' }
+		);
+	};
+
+	return {
+		update(next: unknown) {
+			if (next === current) return;
+			current = next;
+			play();
+		}
+	};
+}