当内容更改时，如何在 Svelte 中淡入 div？

Question

当内容发生变化时，如何在 Svelte 中淡入 div？我有一份已发表文本的清单，另一份是草稿清单。我知道如何使用普通的 javascript 来做到这一点，但是除了加载页面时，是否还有解决方案？

async function published() {
    lipub.style.backgroundColor = "#CCC";
    lidraft.style.backgroundColor = "transparent";
    const response = await fetch("api/mytexts/?id=" + $session.userID);
    result = await response.json();
    return result;
  }

  async function drafts() {
    lipub.style.backgroundColor = "transparent";
    lidraft.style.backgroundColor = "#CCC";
    const response = await fetch("api/mytexts/drafts?id=" + $session.userID);
    result = await response.json();
    return result;
  }

<div>
<div id="headerblock" style="cursor: default;">
    <ul id="headermenu">
      <li class="selected" on:click={published} bind:this={lipub}>Published</li>
      <li on:click={drafts} bind:this={lidraft}>Drafts</li>
      <li on:click={newtext}>{$_("page.newtext.title")}</li>
    </ul>
  </div>

    {#if result}

      <div fade-in-this-when-new-result>

      {#each result as text}
        <div class="block" on:click={() => readData(text.id)}>
          <span class="istext">{text.title}</span>
        </div>
      {/each}

     </div>

    {/if}

</div>

编辑当我在两者之间重置结果时它有效。

Answer 1

您可以使块成为 re-created，使用 {#key} 触发转换，例如

{#key list}
    <div in:fade={{ duration: 300 }}>
        {#each list as item}
            <div>{item}</div>
        {/each}
    </div>
{/key}

REPL

当内容更改时，如何在 Svelte 中淡入 div？

How do you fade in a div in Svelte when content change?

javascript

svelte

sveltekit