Animations

web/src/components/AlbumModal.tsx

@@ -5,6 +5,7 @@ import { useEffect, useRef } from "react";
 import type { Album } from "../api/types";
 import { isBook, unitLabel } from "../lib/covers";
 import { clock } from "../lib/format";
+import { ANIMATE_VIEW_TRANSITIONS } from "../lib/theme";
 import { Cover } from "./Cover";
 
 interface Props {
@@ -44,9 +45,14 @@ export function AlbumModal({
   }, [selectedIndex]);
 
   return (
-    <div className="overlay" style={{ zIndex: 4, background: "oklch(15% 0.03 210 / .6)" }} onClick={onClose}>
+    <div
+      className={ANIMATE_VIEW_TRANSITIONS ? "overlay backdrop-enter" : "overlay"}
+      style={{ zIndex: 4, background: "oklch(15% 0.03 210 / .6)" }}
+      onClick={onClose}
+    >
       <div
         ref={sheet}
+        className={ANIMATE_VIEW_TRANSITIONS ? "sheet-enter" : undefined}
         onClick={(event) => event.stopPropagation()}
         style={{
           background: "oklch(96% 0.012 210)",