page switch animations
This commit is contained in:
parent
2facd06e75
commit
f91dcc4290
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
page_faded = true;
|
||||||
|
setTimeout(() => {
|
||||||
navigate(url);
|
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} />
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue