Animations

前の章では、要素が1つのToDoリストから別のリストに移動するときに、遷移の遅延を使用して動きの錯覚を作成しました。

この錯覚を完成させるには、遷移して いない 要素にもモーションを適用する必要があります。このために、animate ディレクティブを使用します。

最初に flip 関数(flip は 'First, Last, Invert, Play' の略です)を svelte/animate からインポートします

import { flip } from 'svelte/animate';

次に、それを <label> 要素に追加します。

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

この場合、動きが少し遅いので、duration パラメータを追加することができます。

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

durationd => ミリ秒 関数でもよいです。d は,要素が移動する必要があるピクセル数です。

すべてのトランジションとアニメーションが JavaScript ではなく CSS で適用されていて、メインスレッドをブロックすることはない(ブロックされることもない)という点に注意してください。



		
loading editor...

Console

loading Svelte compiler...


		
loading editor...

Compiler options

result = svelte.compile(source, {
generate:
});


		
loading editor...