page switch animations

This commit is contained in:
b1ek 2023-08-13 11:34:56 +10:00
parent 2facd06e75
commit f91dcc4290
Signed by: blek
GPG Key ID: 14546221E3595D0C
3 changed files with 13 additions and 3 deletions

View File

@ -11,6 +11,7 @@ body, html {
top: 0; left: 0; top: 0; left: 0;
border-radius: 16px; border-radius: 16px;
z-index: 0; z-index: 0;
transition: 500ms ease;
} }
@keyframes delay-show-fade-in { @keyframes delay-show-fade-in {

View File

@ -11,9 +11,19 @@
import Background from './widget/Background/Background.svelte'; import Background from './widget/Background/Background.svelte';
export let url = "/load"; export let url = "/load";
let page_faded = false;
RouteStore.subscribe(() => { RouteStore.subscribe(() => {
let new_url = RouteStore.getState().path;
if (url == new_url) return;
url = RouteStore.getState().path; url = RouteStore.getState().path;
navigate(url); page_faded = true;
setTimeout(() => {
navigate(url);
page_faded = false;
}, 550);
}); });
RouteStore.dispatch({ type: 'setPath', path: '/load' }) RouteStore.dispatch({ type: 'setPath', path: '/load' })
@ -23,7 +33,7 @@
<Titlebar /> <Titlebar />
<Background /> <Background />
<div class={style.backdrop}> <div class={style.backdrop} style={`opacity:${page_faded ? 0 : 1}`}>
<div class={style['delay-show']}> <div class={style['delay-show']}>
<Router {url}> <Router {url}>
<Route path='/' component={Home} /> <Route path='/' component={Home} />

View File

@ -1,4 +1,3 @@
import "./root.css";
import App from "./App.svelte"; import App from "./App.svelte";
import '@fontsource-variable/red-hat-display'; import '@fontsource-variable/red-hat-display';