Svelte 過(guò)渡指令

我們可以通過(guò)優(yōu)雅地將元素轉(zhuǎn)入和轉(zhuǎn)出 DOM 來(lái)制作更具吸引力的用戶界面。 Svelte 通過(guò) ?transition? 指令使這變得非常容易。

首先，從 ?svelte/transition? 中導(dǎo)入 ?fade? 函數(shù)...

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

...然后將其添加到 ?<p>? 元素：

<p transition:fade>Fades in and out</p>

示例代碼

• App.svelte

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

<label>
	<input type="checkbox" bind:checked={visible}>
	visible
</label>

{#if visible}
	<p transition:fade>
		Fades in and out
	</p>
{/if}