mat/matdoesdev
1
0
Fork 0
mirror of https://github.com/mat-1/matdoesdev.git synced 2025-08-02 14:46:04 +00:00
Code Activity Actions

reverse transition direction when going back

Browse source
This commit is contained in:
mat 2023-08-13 00:43:48 -05:00
parent 14814245a6
commit a73050ace8
1 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/routes/+layout.svelte
View file

@ -6,10 +6,24 @@
export let data: LayoutData
export const copyrightYear = new Date().getFullYear()
let previousPathname = data.pathname
let currentPathName = data.pathname
let flyDirection = 1 // 1 is right, -1 is left
$: {
if (previousPathname !== currentPathName)
previousPathname = currentPathName
currentPathName = data.pathname
if (currentPathName.startsWith(previousPathname))
flyDirection = 1
else
flyDirection = -1
}
</script>
{#key data.pathname}
<div id="page" in:fly={{ x: -5, duration: 200, delay: 200 }} out:fly={{ x: 5, duration: 200 }}>
<div id="page" in:fly={{ x: -5 * flyDirection, duration: 200, delay: 200 }} out:fly={{ x: 5 * flyDirection, duration: 200 }}>
<main>
<slot />
</main>