diff options
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/+layout.svelte | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 8c36bb0f..e2cb4132 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -11,6 +11,7 @@ import HeadTitle from "$lib/Home/HeadTitle.svelte"; import "../app.css"; import { readable, type Readable } from "svelte/store"; import { navigating } from "$app/stores"; +import { onNavigate } from "$app/navigation"; import NotificationsProvider from "$lib/Notification/NotificationsProvider.svelte"; import Root from "$lib/Home/Root.svelte"; import root from "$lib/Utility/root"; @@ -90,6 +91,34 @@ $: way = data.url.includes("/user") $: if ($navigating) isMenuOpen = false; +onNavigate((navigation) => { + if (!("startViewTransition" in document)) return; + if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; + + const fromPath = navigation.from?.url.pathname ?? "/"; + const toPath = navigation.to?.url.pathname ?? "/"; + const direction = toPath.includes("/user") + ? 1 + : fromPath.includes("/user") + ? -1 + : navigationOrder.indexOf(toPath) > navigationOrder.indexOf(fromPath) + ? 1 + : -1; + + document.documentElement.style.setProperty("--vt-direction", String(direction)); + + return new Promise((resolve) => { + ( + document as Document & { + startViewTransition: (cb: () => Promise<void>) => unknown; + } + ).startViewTransition(async () => { + resolve(); + await navigation.complete; + }); + }); +}); + const handleScroll = () => { const currentScrollPosition = window.scrollY; @@ -437,6 +466,7 @@ $: { position: sticky; top: 1.25rem; background-color: var(--base0011-strong); + view-transition-name: app-header; transition: transform var(--duration-slow) var(--ease-out-quart); } |