32 lines
873 B
TypeScript
32 lines
873 B
TypeScript
/**
|
|
* 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();
|
|
}
|
|
};
|
|
}
|