Svelte includes transitions like fade, fly, and slide.
Removing a todo changes which elements are rendered.
transition:fade runs when the paragraph appears or disappears. Svelte keeps it on the page until the outgoing transition finishes.
<script>
import { fade } from 'svelte/transition';
let done = $state(false);
</script>
<button onclick={() => done = !done}>
{done ? 'Undo' : 'Complete todo'}
</button>
{#if !done}
<p transition:fade={{ duration: 200 }}>Buy milk</p>
{/if}