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

Question

How do you fade in a div in Svelte when content change? I have one list for published texts and another for drafts. I know how to do it with plain javascript but is there a solution for this in svelte besides when a page is loaded?

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>

EDIT It works when I reset result in between.

Answer 1

You can cause a block to be re-created, triggering transitions using {#key}, e.g.

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

REPL