Skip to main content

通常、要素でトランジションが再生されるのは、その要素を直接含むブロックが追加もしくは破棄されるときだけです。この例では、リスト全体の表示を切り替えても、個々のリスト要素でトランジションは再生されません。

そのかわりに、スライダーで個々のアイテムが追加もしくは削除されたときだけでなく、チェックボックスを切り替えたときにもトランジションが再生されるようにしたいと思います。

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

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

Svelte 3 では、トランジションはデフォルトで global で、トランジションの動作をローカルにするために |local 修飾子を使用する必要がありました。

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