CODEWITHSUNDEEP
javascriptcsstemplatestransitionsvelte
Timmy Lee
Timmy Lee

Reputation: 795

Transitions with Await in Svelte

Consider this svelte code

   {#await}
   <div class='loading'>
     <p>LOADING LOGO ANIMATION</p>
   </div>  
   {:then value}
   <div class='loaded'>
     <p>Main site content</p>
   </div>

I'd like to add a transition or animation from the loading 'await' part to when everything is loaded. I'd like the loading part to fade out, and only when its fully faded out for the loaded content to then fade in. Any ideas ? Can this be done this way ?

Upvotes: 2

Views: 2407

Answers (2)

Richard Palethorpe
Richard Palethorpe

Reputation: 81

You can add a delay to the in transition which is greater than the out transition. e.g.

{#await}
   <div out:fade={{ duration: 100 }} class='loading'>
     <p>LOADING LOGO ANIMATION</p>
   </div>  
{:then value}
   <div in:fade={{ delay: 101, duration: 100 }} class='loaded'>
     <p>Main site content</p>
   </div>
{/await}

This will avoid having both elements in the DOM at the same time.

If you always add delays to the beginning of transitions then whenever one component replaces another they should not appear in the DOM at the same time. Even if the components have no information about each other except for the transition duration.

Upvotes: 0

Matt Wolff
Matt Wolff

Reputation: 349

Sounds like you might be interested in Svelte's transition events.

Try something like:

{#await promise}
  <p transition:fade
     on:introstart="{() => visible = false}"
     on:outroend="{() => visible = true}">
  ...waiting </p>
{:then value}
  {#if visible}
    <div class="loaded" in:fade>
      <p>Main site content</p>
    </div>
  {/if}
{/await}

Just make sure your <script> imports fade: import { fade } from 'svelte/transition' and you set a variable like visible to false

Here's a version of this running in a REPL

Upvotes: 7

Related Questions