javascript - 在 Svelte 中使用 Await 进行转换

Question

考虑这个精巧的代码

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

我想添加从加载“等待”部分到加载所有内容的过渡或动画。我希望加载部分淡出，并且只有当它完全淡出时加载的内容才会淡入。有什么想法吗？可以这样做吗？

Answer 1

听起来您可能对 Svelte 的 transition events 感兴趣.

尝试这样的事情:

{#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}

只需确保您的 <script>进口褪色:import { fade } from 'svelte/transition'然后你设置一个像visible这样的变量至 false

这是在 REPL 中运行的一个版本