diff options
| -rw-r--r-- | server/src/routes/ui/style.rs | 1 | ||||
| -rw-r--r-- | web/js-transition.css | 16 | ||||
| -rw-r--r-- | web/script/transition.ts | 13 |
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 +} |