___布局中的Svelte过渡

Question

如何在__layout中使用转换来加载带有动画的页面？
__layout.svelte:

<script>
import Header from '$lib/Header/index.svelte'
import Footer from '$lib/Footer/index.svelte'
import '../../app.css'
import Animate from '$lib/Animate.svelte'
</script>
<Header />
<div class="bg-gray-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<Animate>
<slot />
</Animate>
</div>
</div>
<Footer />

Animate.svelte:

<script>
import { fade, fly } from 'svelte/transition'
</script>
<div in:fly={{ y: 200, duration: 2000 }} out:fade>
<slot />
</div>

在本例中，过渡效果仅适用于一次并显示动画。但我想在每次页面更改时显示转换！是否有改进此应用程序的解决方案？

Answer 1

为此，您需要将{#key}块与一些在需要时更新的变量结合使用。您可以使用$app/stores中的page。

__layout.svelte:

<script>
import Header from '$lib/Header/index.svelte'
import Footer from '$lib/Footer/index.svelte'
import '../../app.css'
import Animate from '$lib/Animate.svelte'
import { page } from '$app/stores' // <-- new
</script>
<Header />
<div class="bg-gray-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- The key's content is destroyed and recreated everytime the $page
variable changes -->
{#key $page}
<Animate>
<slot />
</Animate>
{/key}
</div>
</div>
<Footer />

$app/stores的文档：https://kit.svelte.dev/docs#modules-$app store
{#key}的文档：https://svelte.dev/docs#key