javascript / expert
Snippet
Orchestrierung des UI-Zustands mit Transitions-Events
Fortgeschrittene UI-Koordination erfordert oft das genaue Wissen, wann eine Transition beginnt oder endet, um Seiteneffekte wie das Sperren des Scrollens oder das Aktualisieren des globalen Zustands zu synchronisieren. Svelte bietet spezifische Lifecycle-Events für Transitionen (introstart, introend, outrostart, outroend), die ein präzises Zustandsmanagement während visueller Änderungen ermöglichen.
snippet.js
javascript
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
Erklärung
1
on:introstart
Wird ausgelöst, sobald die 'In'-Transition beginnt; nützlich für das Setzen von 'Busy'-Zuständen.
2
on:outroend
Wird erst ausgelöst, wenn die 'Out'-Transition vollständig abgeschlossen ist; ideal für Cleanup-Logik.