Transition functions can accept parameters. Replace the fade
transition with fly
...
<script>
import { fly } from 'svelte/transition';
let visible = true;
</script>
...and apply it to the <p>
along with some options:
<p transition:fly="{{ y: 200, duration: 2000 }}">
Flies in and out
</p>
Note that the transition is reversible — if you toggle the checkbox while the transition is ongoing, it transitions from the current point, rather than the beginning or the end.
App.svelte
xxxxxxxxxx
15
1
<script>
2
import { fade } from 'svelte/transition';
3
let visible = true;
4
</script>
5
6
<label>
7
<input type="checkbox" bind:checked={visible}>
8
visible
9
</label>
10
11
{#if visible}
12
<p transition:fade>
13
Fades in and out
14
</p>
15
{/if}
Console
bundling https://unpkg.com/svelte@3/internal/index.mjs
xxxxxxxxxx
161
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
add_render_callback,
5
append,
6
attr,
7
check_outros,
8
create_bidirectional_transition,
9
detach,
10
element,
11
empty,
12
group_outros,
13
init,
14
insert,
15
listen,
16
safe_not_equal,
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */