Skip to main content

Chúng ta có thể tạo giao diện người dùng hấp dẫn hơn bằng cách chuyển tiếp nhẹ các phần tử vào và ra khỏi DOM. Svelte làm điều này rất dễ dàng với chỉ thị transition.

Đầu tiên, nhập hàm fade từ svelte/transition...

App.svelte
<script>
	import { fade } from 'svelte/transition';
	let visible = true;
</script>

...sau đó thêm vào phần tử <p>:

App.svelte
<p transition:fade>
	Fades in and out
</p>

Tiếp theo: Thêm tham số

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
	let visible = true;
</script>
 
<label>
	<input type="checkbox" bind:checked={visible} />
	hiện
</label>
 
{#if visible}
	<p>
		Fades in and out
	</p>
{/if}
initialising