通过优雅地将元素过渡进出 DOM，我们可以制作更吸引人的用户界面。Svelte 通过 transition 指令让这一过程变得非常简单。
首先，从 svelte/transition 中导入 fade 函数...
App
<script>
import { fade } from 'svelte/transition';
let visible = $state(true);
</script><script lang="ts">
import { fade } from 'svelte/transition';
let visible = $state(true);
</script>...然后将其添加到 <p> 元素上：
App
<p transition:fade>
Fades in and out
</p>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
let visible = $state(true);
</script>
<label>
<input type="checkbox" bind:checked={visible} />visible
</label>
{#if visible}<p>
Fades in and out
</p>
{/if}