javascript / expert
Snippet
Orchestrating UI State with Transition Events
Advanced UI coordination often requires knowing exactly when a transition starts or finishes to synchronize side effects, such as locking scroll or updating global state. Svelte provides specific lifecycle events for transitions (introstart, introend, outrostart, outroend) that allow for precise state management during visual changes.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>import { fade } from 'svelte/transition';let status = 'idle';let visible = true;</script>{#if visible}<divtransition:fadeon:introstart={() => status = 'Entering...'}on:outroend={() => status = 'Animation Finished'}>Dynamic Content</div>{/if}<p>Status: {status}</p>
svelte
Breakdown
1
on:introstart
Triggers the moment the 'in' transition begins, useful for setting 'busy' states.
2
on:outroend
Triggers only after the 'out' transition is fully complete, ideal for cleanup logic.