전환(Transition) / 인 앤 아웃 • Svelte Tutorial

transition 지시어 대신에, 요소에 in 이나 out, 아니면 둘 모두의 지시어를 설정할 수 있습니다. fly 와 함께 fade 를 불러옵시다.

App.svelte

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

transition 지시어를 분리된 in 과 out 지시어로 바꿔 봅시다.

App.svelte

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

이 경우엔, 전환은 되돌릴 수 없습니다.

<script>

	import { fly } from 'svelte/transition';

	let visible = 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}

initialising