Skip to main content

보통, 전환은 그 요소를 담고 있는 블록이 추가되거나 삭제될 때 재생됩니다. 이 예시에서, 전체 리스트가 보이지 않도록 바꿔도 개별 리스트 요소에는 전환이 적용되지 않습니다.

슬라이더로 아이템을 추가하거나 제거할 때만 전환이 재생되는 대신에 체크박스를 클릭할 때에도 적용되도록 하고 싶습니다.

전역(global) 전환을 사용하면 가능합니다. 전환을 포함한 아무 블록이 추가되거나 제거될 때 전환이 재생됩니다.

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

스벨트 3에서는 전역 전환이 기본값이었고, 로컬 적으로 적용하기 위해선 |local 모디파이어를 사용해야 했습니다.

Next: 키 블록

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