Instead of the transition
directive, an element can have an in
or an out
directive, or both together. Import fade
alongside fly
...
import { fade, fly } from 'svelte/transition';
...then replace the transition
directive with separate in
and out
directives:
<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
Flies in, fades out
</p>
In this case, the transitions are not reversed.
App.svelte
xxxxxxxxxx
15
1
<script>
2
import { fly } 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:fly="{{ y: 200, duration: 2000 }}">
13
Flies 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 */