Animations

剛剛的 crossfade 雖然可以讓 Todo List 在勾選項目時有移動的效果，但其他項目的遞補移動卻沒有。

這時候我們可加上 flip 來讓其他項目的遞補移動也有動畫效果。

<script>
    import { flip } from 'svelte/transition';

    // ...
</script>

<!-- ... -->

<li
    class:done
    in:receive=
    out:send=
    animate:flip=
>
    <!-- ... -->
</li>

[!NOTE]

請注意，所有動畫都是透過 CSS 應用的，而不是 JavaScript，這意味著它們不會阻塞（或被阻塞）主執行緒。