Skip to main content

Thay vì sử dụng chỉ thị transition, một phần tử có thể có một chỉ thị in hoặc một chỉ thị out, hoặc cả hai cùng một lúc. Import fade cùng với fly...

App.svelte
import { fade, fly } from 'svelte/transition';

... sau đó thay thế chỉ thị transition bằng các chỉ thị in và out riêng lẻ:

App.svelte
<p in:fly={{ y: 200, duration: 2000 }} out:fade>
	Flies in, fades out
</p>

Trong trường hợp này, các chuyển tiếp không được đảo ngược.

Tiếp theo: Tùy biến CSS chuyển tiếp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
	import { fly } from 'svelte/transition';
	let visible = true;
</script>
 
<label>
	<input type="checkbox" bind:checked={visible} />
	hiện
</label>
 
{#if visible}
	<p transition:fly={{ y: 200, duration: 2000 }}>
		Flies in and out
	</p>
{/if}
initialising