javascript / intermediate
Snippet
Smooth UI Transitions with Built-in Effects
Svelte includes a robust transition engine. You can apply global transitions using the 'transition' directive or specific 'in' and 'out' transitions for different entry/exit effects. These are handled efficiently by Svelte's runtime.
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
Breakdown
1
import { fade, fly } from 'svelte/transition';
Imports standard transition functions from the Svelte library.
2
transition:fly={{ y: 200, duration: 1000 }}
Applies a flying animation when the element enters or leaves the DOM.
3
out:fade
Overrides the exit animation to use a fade effect instead of the fly effect.