Svelte のトランジションエンジンで特に強力な特徴は、トランジションを遅延させて複数の要素間でトランジションが調整されるように出来ることです。

このペアのToDoリストを見てみましょう。ToDoを切り替えると反対側のリストに送られます。現実の世界ではオブジェクトはこのような振る舞いをしません。消えたり別の場所に現れたりするのではなく、一連の中間的な位置を移動します。モーションを使用することでアプリで何が起こっているのかをユーザーに理解してもらうことができます。

この効果は、send と receive というトランジションのペアを作成するcrossfade 関数を使用することで実現できます。要素は、「send」されると、対応する「receive」される要素を探し、その要素を相手の位置に変換してフェードアウトするトランジションを生成します。要素が「receive」されると、逆のことが起こります。対応する要素がない場合は、fallback トランジションが使われます。

65行目にある <label> 要素を探して、send と receive トランジションを追加してください。

<label
	in:receive="{{key: todo.id}}"
	out:send="{{key: todo.id}}"
>

次の <label> 要素にも同じことをしましょう。

<label
	class="done"
	in:receive="{{key: todo.id}}"
	out:send="{{key: todo.id}}"
>

これでアイテムを切り替えると、アイテムはスムーズに新しい場所に移動します。遷移していない項目は、まだ不器用に跳ね回っています。これは次の章で解決できます。