要素を DOM に優美に追加したり削除したりすることで、より魅力的なユーザーインターフェイスを作成できます。Svelte は transition ディレクティブを使用してこれを非常に簡単にします。
まず、svelte/transition から fade 関数をインポートします。
App
<script>
import { fade } from 'svelte/transition';
let visible = $state(true);
</script>次に、それを <p> 要素に追加します。
App
<p transition:fade>
Fades in and out
</p>previous next
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}