javascript / intermediate
Snippet
Koordinierung von UI-Zuständen mit Transition-Events
Svelte-Transitionen geben Lifecycle-Events aus, mit denen Sie den Fortschritt der Animation verfolgen können. Dies ist entscheidend für die Synchronisierung von Logik mit visuellen Zustandsänderungen.
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
Erklärung
1
on:introstart={() => status = 'Entering...'}
Wird in dem Moment ausgelöst, in dem die Eingangs-Transition beginnt.
2
on:outroend={() => status = 'Gone'}
Wird genau dann ausgelöst, wenn das Element nach der Animation aus dem DOM entfernt wurde.