Skip to main content

We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the transition directive.

First, import the fade function from svelte/transition...

App.svelte
<script>
	import { fade } from 'svelte/transition';
	let visible = true;
</script>

...then add it to the <p> element:

App.svelte
<p transition:fade>
	Fades in and out
</p>

Next: Adding parameters

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
	let visible = true;
</script>
 
<label>
	<input type="checkbox" bind:checked={visible} />
	visible
</label>
 
{#if visible}
	<p>
		Fades in and out
	</p>
{/if}
initialising