Javascript 轻巧的等待过渡

考虑一下这个苗条的代码

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

---

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

听起来你可能对斯维特的感兴趣

尝试以下方法：

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

只需确保您的导入淡入淡出：从'svelte/transition'导入{fade}，然后设置一个变量，如visible to false

---

这是一个版本，在一个

中运行，听起来你可能对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}

只需确保您的导入淡入淡出：从'svelte/transition'导入{fade}，然后设置一个变量，如visible to false

---

这是一个运行在

Hiya中的版本！谢谢你的回答！是的，这确实有效，但是由于某种原因，徽标褪色后需要很长时间才能显示下一部分。我真的不明白为什么会这样。当我移除过渡时，它工作，但没有动画，没有任何延迟。。这很奇怪：很高兴知道它几乎适合你。。。。也许值得建立一个网站来展示你的意思。嗨！谢谢你的回答！是的，这确实有效，但是由于某种原因，徽标褪色后需要很长时间才能显示下一部分。我真的不明白为什么会这样。当我移除过渡时，它工作，但没有动画，没有任何延迟。。这很奇怪：很高兴知道它几乎适合你。。。。设立一个网站来展示你的意思可能是值得的。