在 Svelte 中使用 Await 进行转换

Question

考虑这个精巧的代码

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

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

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> 导入 fade: import { fade } from 'svelte/transition' 并将 visible 之类的变量设置为 false

这是运行在 REPL

中的一个版本

在 Svelte 中使用 Await 进行转换

Transitions with Await in Svelte

javascript

css

templates

transition

svelte