Page Transitions!

This commit is contained in:
Sangelo 2023-06-26 10:38:57 +02:00
parent 9750c8f5cd
commit 79422e065e
2 changed files with 18 additions and 3 deletions

7
src/routes/+layout.js Normal file
View file

@ -0,0 +1,7 @@
export const load = ({ url }) => {
const { pathname } = url
return {
pathname
}
}

View file

@ -1,14 +1,22 @@
<script>
import "../app.scss";
import Header from "./Header.svelte";
import { fly } from 'svelte/transition'
export let data
</script>
<div class="app">
<Header />
<main>
{#key data.pathname}
<main
in:fly={{ x: -10, duration: 250, delay: 250 }}
out:fly={{ x: 5, duration: 250 }}
>
<slot />
</main>
{/key}
<footer>
<p>