Transitions / In and out • Svelte Tutorial

Basic Svelte Transitions In and out

transition ディレクティブの代わりに、要素に in や out、または両方のディレクティブを設定することができます。fly と一緒に fade をインポートしてください。

App

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

その後、transition ディレクティブを in と out ディレクティブにそれぞれ置き換えてください。

App

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

この場合、トランジションは可逆的にはなりません。

previous next

<script>

	import { fly } from 'svelte/transition';

	let visible = $state(true);

</script>

<label>

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

	visible

</label>

{#if visible}

	<p transition:fly={{ y: 200, duration: 2000 }}>

		Flies in and out

	</p>

{/if}

show text show editor