reenable js transitions

3 files changed, 23 insertions, 7 deletions

diff --git a/server/src/routes/ui/style.rs b/server/src/routes/ui/style.rs
index 1f92690..b8a5fdb 100644
--- a/server/src/routes/ui/style.rs
+++ b/server/src/routes/ui/style.rs
@@ -37,6 +37,7 @@ fn css_bundle() -> String {
         "nodepage.css",
         "nodecard.css",
         "js-player.css",
+        "js-transition.css",
         "forms.css"
     )
 }
diff --git a/web/js-transition.css b/web/js-transition.css
new file mode 100644
index 0000000..54a899f
--- /dev/null
+++ b/web/js-transition.css
@@ -0,0 +1,16 @@
+@keyframes jst-fadein {
+    from {
+        background-color: transparent;
+    }
+    to {
+        background-color: black;
+    }
+}
+@keyframes jst-fadeout {
+    from {
+        background-color: black;
+    }
+    to {
+        background-color: transparent;
+    }
+}
diff --git a/web/script/transition.ts b/web/script/transition.ts
index aa172f7..809abd6 100644
--- a/web/script/transition.ts
+++ b/web/script/transition.ts
@@ -5,7 +5,7 @@
 */
 /// <reference lib="dom" />
 
-const duration = 0.2
+const duration = 200
 globalThis.addEventListener("load", () => {
     patch_page()
 })
@@ -60,16 +60,15 @@ function fade(dir: boolean) {
     overlay.style.width = "100vw"
     overlay.style.height = "100vh"
     overlay.style.backgroundColor = dir ? "black" : "transparent"
-    overlay.style.transition = `background-color ${duration}s`
     overlay.style.zIndex = "99999";
-    setTimeout(() => {
-        overlay.style.backgroundColor = dir ? "transparent" : "black"
-    }, 0)
+    overlay.style.animationName = dir ? "jst-fadeout" : "jst-fadein"
+    overlay.style.animationFillMode = "forwards"
+    overlay.style.animationDuration = `${duration}ms`
     document.body.appendChild(overlay)
     return new Promise<void>(res => {
         setTimeout(() => {
             if (dir) document.body.removeChild(overlay)
             res()
-        }, duration * 1000)
+        }, duration)
     })
-}
\ No newline at end of file
+}