Part 2 / Transitions / In and out

Instead of the transition directive, an element can have an in or an out directive, or both together. Import fade alongside fly...

App.svelte

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

...then replace the transition directive with separate in and out directives:

App.svelte

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

In this case, the transitions are not reversed.

<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