Transitions
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
...
<script>
import { fade } from 'svelte/transition';
let visible = true;
</script>
...then add it to the <p>
element:
<p transition:fade>Fades in and out</p>
App.svelte
xxxxxxxxxx
14
1
<script>
2
let visible = true;
3
</script>
4
5
<label>
6
<input type="checkbox" bind:checked={visible}>
7
visible
8
</label>
9
10
{#if visible}
11
<p>
12
Fades in and out
13
</p>
14
{/if}
Console
xxxxxxxxxx
118
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
append,
5
attr,
6
detach,
7
element,
8
empty,
9
init,
10
insert,
11
listen,
12
noop,
13
safe_not_equal,
14
space,
15
text
16
} from "svelte/internal";
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */