我们可以通过优雅地将元素转入和转出 DOM 来制作更具吸引力的用户界面。 Svelte 通过 ​transition​ 指令使这变得非常容易。

首先，从 ​svelte/transition​ 中导入 ​fade​ 函数...

<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}