Skip to main content

Thường thì, các chuyển tiếp chỉ hoạt động trên các phần tử khi khối chứa trực tiếp của chúng được thêm vào hoặc hủy bỏ. Trong ví dụ này, việc chuyển đổi khả năng nhìn thấy của toàn bộ danh sách không áp dụng các chuyển tiếp cho các phần tử danh sách cục bộ.

Thay vào đó, chúng ta muốn các chuyển tiếp không chỉ hoạt động khi các mục cục bộ được thêm và loại bỏ với thanh trượt mà còn khi chúng ta chuyển đổi checkbox.

Chúng ta có thể làm được điều này với một chuyển tiếp toàn cục, chạy khi bất kỳ khối chứa các chuyển tiếp nào được thêm hoặc xóa:

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

Trong Svelte 3, các chuyển tiếp mặc định là toàn cục (global) và bạn phải sử dụng modifier |local để làm chúng trở thành chuyển tiếp cục bộ.

Tiếp theo: Key blocks (khối khóa)

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} />
	xem danh sách
</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