Skip to main content

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

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

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

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

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

次に、それを <li> 要素に追加します:

TodoList.svelte
<li
	class:done
	in:receive={{ key: todo.id }}
	out:send={{ key: todo.id }}
	animate:flip
>

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

TodoList.svelte
<li
	class:done
	in:receive={{ key: todo.id }}
	out:send={{ key: todo.id }}
	animate:flip={{ duration: 200 }}
>

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

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

Next: Actions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script>
	import { send, receive } from './transition.js';
 
	export let store;
	export let done;
</script>
 
<ul class="todos">
	{#each $store.filter((todo) => todo.done === done) as todo (todo.id)}
		<li
			class:done
			in:receive={{ key: todo.id }}
			out:send={{ key: todo.id }}
		>
			<label>
				<input
					type="checkbox"
					checked={todo.done}
					on:change={(e) => store.mark(todo, e.currentTarget.checked)}
				/>
 
				<span>{todo.description}</span>
 
				<button on:click={() => store.remove(todo)} aria-label="Remove" />
			</label>
		</li>
	{/each}
</ul>
 
<style>
	label {
		width: 100%;
		height: 100%;
		display: flex;
	}
 
	span {
		flex: 1;
	}
 
	button {
		background-image: url(./remove.svg);
	}
</style>
initialising