在 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 中运行的一个版本