__layout 中的苗条过渡答案

【问题标题】：Svelte transition in __layout__layout 中的苗条过渡
【发布时间】：2021-09-13 06:25:24
【问题描述】：

如何使用 __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>

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

【问题讨论】：

标签： transition svelte sveltekit svelte-transition

【解决方案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-stores
{#key}的文档：https://svelte.dev/docs#key

【讨论】：