It can be useful to know when transitions are beginning and ending. Svelte dispatches events that you can listen to like any other DOM event:
<p
transition:fly="{{ y: 200, duration: 2000 }}"
on:introstart="{() => status = 'intro started'}"
on:outrostart="{() => status = 'outro started'}"
on:introend="{() => status = 'intro ended'}"
on:outroend="{() => status = 'outro ended'}"
>
Flies in and out
</p>
App.svelte
xxxxxxxxxx
19
1
<script>
2
import { fly } from 'svelte/transition';
3
4
let visible = true;
5
let status = 'waiting...';
6
</script>
7
8
<p>status: {status}</p>
9
10
<label>
11
<input type="checkbox" bind:checked={visible}>
12
visible
13
</label>
14
15
{#if visible}
16
<p transition:fly="{{ y: 200, duration: 2000 }}">
17
Flies in and out
18
</p>
19
{/if}
Console
bundling https://unpkg.com/svelte@3/internal/index.mjs
xxxxxxxxxx
172
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 */