javascript / intermediate
Snippet
Coordinating UI States with Transition Events
Svelte transitions emit lifecycle events that allow you to track the animation progress. This is essential for syncing non-visual logic with visual state changes.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>import { fade } from 'svelte/transition';let status = 'Idle';</script><divtransition:fadeon:introstart={() => status = 'Entering...'}on:introend={() => status = 'Entered'}on:outrostart={() => status = 'Exiting...'}on:outroend={() => status = 'Gone'}>{status}</div>
svelte
Breakdown
1
on:introstart={() => status = 'Entering...'}
Triggered the moment the enter transition begins.
2
on:outroend={() => status = 'Gone'}
Triggered exactly when the element is removed from the DOM after the animation.