Skip to main content

Part 3 / Animations / The animate directive

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

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

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

<script>
	import { flip } from 'svelte/animate';
	import { send, receive } from './transition.js';

	export let store;
	export let filter;
</script>

次に、それを <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 }}
>

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

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

Next: Actions

initialising