diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/js-transition.css | 16 | ||||
| -rw-r--r-- | web/script/transition.ts | 13 |
2 files changed, 22 insertions, 7 deletions
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 +} |