CODEWITHSUNDEEP
transitionsveltesveltekitsvelte-transition
Sarah Diba
Sarah Diba

Reputation: 97

Svelte transition in __layout

How can use transitions in __layout for loading a page with animation?
__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>

in this example transitioning effects only works for one time and shows animation. but I'd like to show transition every time that page changes! Is there a solution to improve this app?

Upvotes: 1

Views: 1612

Answers (1)

dummdidumm
dummdidumm

Reputation: 5426

For this you need to use the {#key} block in combination with some variable that updates when you want it to. You can use page from $app/stores for that.

__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 />

Docs for $app/stores: https://kit.svelte.dev/docs#modules-$app-stores
Docs for {#key}: https://svelte.dev/docs#key

Upvotes: 4

Related Questions