在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的产品感兴趣 过渡事件.

试试类似的东西。

{#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> 导入fade。import { fade } from 'svelte/transition' 你设置一个变量，如 visible 到 false

下面是这个版本的运行在一个 REPL