javascript / intermediate
Snippet
Weiche UI-Übergänge mit integrierten Effekten
Svelte enthält eine robuste Transition-Engine. Mit der Direktive 'transition' können globale Übergänge angewendet werden, oder spezifische 'in'- und 'out'-Übergänge für unterschiedliche Eintritts- und Austrittseffekte. Diese werden effizient von der Svelte-Runtime verwaltet.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>import { fade, fly } from 'svelte/transition';let visible = true;</script><label><input type="checkbox" bind:checked={visible} /> Show</label>{#if visible}<div transition:fly={{ y: 200, duration: 1000 }} out:fade>Fly in, Fade out</div>{/if}
svelte
Erklärung
1
import { fade, fly } from 'svelte/transition';
Importiert Standard-Übergangsfunktionen aus der Svelte-Bibliothek.
2
transition:fly={{ y: 200, duration: 1000 }}
Wendet eine Fluganimation an, wenn das Element in den DOM eintritt oder ihn verlässt.
3
out:fade
Überschreibt die Austrittsanimation, um stattdessen einen Fade-Effekt zu verwenden.