¿Cómo se desvanece en un div en Svelte cuando cambia el contenido? Tengo una lista de textos publicados y otra de borradores. Sé cómo hacerlo con javascript simple, pero ¿hay alguna solución para esto en svelte además de cuando se carga una página?

 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>

EDITAR Funciona cuando restablezco el resultado en el medio.