Việc biết khi nào chuyển tiếp bắt đầu và kết thúc có thể hữu ích. Svelte phát ra các sự kiện mà bạn có thể lắng nghe giống như bất kỳ sự kiện DOM nào khác:
App.svelte
<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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
import { fly } from 'svelte/transition';let visible = true;
let status = 'waiting...';
</script>
<p>status: {status}</p><label>
<input type="checkbox" bind:checked={visible} />visible
</label>
{#if visible} <p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out
</p>
{/if}