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 ?

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 ?

• javascript
• css
• templates
• transition
• svelte

Share Improve this question Follow asked May 17, 2020 at 20:27 Timmy LeeTimmy Lee 80511 gold badge1212 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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

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 ponent replaces another they should not appear in the DOM at the same time. Even if the ponents have no information about each other except for the transition duration.