javascript / intermediate
Snippet
Sanfte Zustandsübergänge mit Tweened Motion
Die Funktion 'tweened' erstellt einen Store, der über die Zeit zwischen Werten interpoliert. Sie ist hocheffizient für die Erstellung flüssiger UI-Fortschrittsbalken oder numerischer Übergänge ohne externes CSS.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>import { tweened } from 'svelte/motion';import { cubicOut } from 'svelte/easing';const progress = tweened(0, {duration: 400,easing: cubicOut});function handleClick() {progress.set(1);}</script><progress value={$progress}></progress>
svelte
Erklärung
1
tweened(0, { duration: 400 })
Initialisiert einen Store, der bei 0 beginnt und 400ms benötigt, um einen neuen Wert zu erreichen.
2
progress.set(1)
Löst die Animation aus, um den Store-Wert sanft vom aktuellen Zustand auf 1 zu überführen.
3
$progress
Verwendet die Auto-Subscription-Syntax, um den interpolierten Wert während der Animation zu lesen.