Skip to main content

Part 2 / Transitions / Local transitions

通常、コンテナブロックが追加もしくは破棄されると、要素にトランジションが適用されます。この例では、リスト全体の表示を切り替えると、個々のリスト要素にもトランジションが適用されます。

かわりに、個々のアイテムが追加もしくは削除された時にのみトランジションが再生されるようにしたいと思います。-- 言い換えれば、ユーザーがスライダーをドラッグしたときです。

これを実現するには、ローカル トランジションを使用します。これは、自身にトランジションを持つブロックが追加されたり削除されたりしたときにのみ再生されます。

App.svelte
<div transition:slide|local>
	{item}
</div>

Next: Key blocks

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
<script>
	import { slide } from 'svelte/transition';
 
	let showItems = true;
	let i = 5;
	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
</script>
 
<label>
	<input type="checkbox" bind:checked={showItems} />
	show list
</label>
 
<label>
	<input type="range" bind:value={i} max="10" />
</label>
 
{#if showItems}
	{#each items.slice(0, i) as item}
		<div transition:slide>
			{item}
		</div>
	{/each}
{/if}
 
<style>
	div {
		padding: 0.5em 0;
		border-top: 1px solid #eee;
	}
</style>
initialising