From 704d65109a0a249583e49e600fef848934cfc13e Mon Sep 17 00:00:00 2001
From: metamuffin <metamuffin@disroot.org>
Date: Sat, 21 Oct 2023 20:59:02 +0200
Subject: reenable js transitions

---
 web/js-transition.css    | 16 ++++++++++++++++
 web/script/transition.ts | 13 ++++++-------
 2 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 web/js-transition.css

(limited to 'web')

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
+}
-- 
cgit v1.2.3-70-g09d2