Svelte Animationen

6 Kernkonzepte

Die wichtigsten Animationstechniken in Svelte: fade · slide · fly · scale · draw · animate Svelte bietet eingebaute Animationen und Übergänge, die einfach zu verwenden und hochperformant sind. Diese Cheatsheet fasst die wichtigsten Direktiven und Techniken für flüssige Benutzererfahrungen zusammen.

Transitionen – fade, slide, fly, scale

transition:fade · transition:slide · transition:fly

<div transition:fade={ { duration: 500 } }> Inhalt </div>

Transitionen werden beim Ein- und Ausblenden von Elementen (z.B. mit {#if}) aktiviert. Svelte bietet mehrere eingebaute Transitionen: fade, slide, fly, scale und draw.

Eingebaute Transitionen

Transition	Beschreibung	Parameter
fade	Ein-/Ausblenden (Opacity)	duration, delay
slide	Vertikales Ein-/Ausfahren	duration, delay, axis
fly	Fliegen von einer Position	duration, delay, x, y, opacity
scale	Skalieren (Größe ändern)	duration, delay, start
draw	SVG-Pfad zeichnen	duration, delay, speed

Beispiele

import { fade, slide, fly, scale } from 'svelte/transition';

let visible = true;

</script>

{#if visible}

{/if}

{#if visible}

<p transition:slide={ { duration: 300, axis: 'x' } }>Slide</p>

{/if}

{#if visible}

{/if}

{#if visible}

<p transition:scale={ { start: 0.5, duration: 300 } }>Scale</p>

{/if}

<button on:click={() => visible = !visible}>

Toggle

</button>

Tipp: Für verschiedene Ein- und Aus-Animationen verwenden Sie in:transition und out:transition separat. Die Transition wird automatisch angewendet, wenn das Element in den DOM eingefügt oder daraus entfernt wird.

in / out – Ein- und Aus-Animationen separat

in:fade · out:fly · transition:slide

in und out ermöglichen es, separate Animationen für das Einfügen (in) und Entfernen (out) eines Elements zu definieren. Die Direktive transition verwendet dieselbe Animation für beide Fälle.

Beispiele

import { fade, fly, slide, scale } from 'svelte/transition';

let show = true;

</script>

{#if show}

Kommt mit Fade, geht mit Fly

</p>

{/if}

{#if show}

In: Scale (verzögert), Out: Slide

</p>

{/if}

{ show ? 'Ausblenden' : 'Einblenden' }

</button>

Tipp: Separate in und out Animationen geben Ihnen maximale Kontrolle – z.B. ein sanftes Einblenden und ein dynamisches Herausfliegen für eine ansprechende UX.

Custom Transitionen – Eigene Animationen mit CSS & JS

css · tick · easing · custom

// JS-Transition function custom(node, { duration }) { return { duration, css: t => `transform: scale(${t})` }; }

Custom Transitionen ermöglichen es, eigene Animationen mit JavaScript oder CSS zu definieren. Sie haben volle Kontrolle über den Animationsverlauf.

Beispiele

// CSS-Transition (mit importierten Klassen)

import { fade } from 'svelte/transition';

// Benutzerdefinierte JS-Transition

function rotate(node, { duration = 500 }) {

return {

duration,

css: t => {

return `transform: rotate(${t * 360}deg); opacity: ${t};`;

}

};

}

// Mit tick für komplexe Animationen

function elastic(node, { duration = 800 }) {

const start = node.getBoundingClientRect();

return {

duration,

tick: (t, u) => {

const s = 1 - Math.pow(u, 3) * Math.cos(u * 8);

node.style.transform = `scale(${s})`;

}

};

}

let show = true;

</script>

{#if show}

Rotation

</div>

{/if}

Tipp: Für CSS-basierte Animationen können Sie auch Keyframes in <style> definieren und mit transition:css einbinden. Die JS-Transition bietet maximale Flexibilität für komplexe Effekte.

Keyframes – CSS-Animationen mit @keyframes

@keyframes · animation · use:animate

Keyframes mit use:animate ermöglichen die Verwendung von CSS-Keyframe-Animationen in Svelte-Komponenten – ideal für wiederkehrende Animationen wie Lade-Spinner oder Puls-Effekte.

Beispiele

import { animate } from 'svelte/animate';

</script>

<style>

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

@keyframes bounce {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-30px); }

}

.spinner { animation: spin 1s linear infinite; }

.bounce { animation: bounce 0.5s ease infinite; }

</style>

</div>

// Mit use:animate für dynamische Keyframes

import { animate } from 'svelte/animate';

</script>

<div use:animate={spin}>Animiert</div>

Tipp: Keyframes sind ideal für kontinuierliche Animationen wie Lade-Spinner oder Hover-Effekte. Für einmalige Ein-/Aus-Animationen sind Transitionen die bessere Wahl.

animate – Listen-Animationen

animate:flip · key · each

{#each items as item (item.id)} <div animate:flip>{item.name}</div> {/each}

animate:flip animiert Änderungen in Listen – beim Hinzufügen, Entfernen oder Neuanordnen von Elementen. Es ist eine der leistungsstärksten Funktionen von Svelte für dynamische Listen.

Beispiele

import { flip } from 'svelte/animate';

import { fade } from 'svelte/transition';

let items = ['🍎 Apfel', '🍌 Banane', '🍒 Kirsche'];

function add() {

items = ['🍇 Traube', ...items];

}

function remove() {

items = items.slice(1);

}

function shuffle() {

items = items.sort(() => Math.random() - 0.5);

}

</script>

<button on:click={ add }>+ Hinzufügen</button>

<button on:click={ remove }>− Entfernen</button>

<button on:click={ shuffle }>🔀 Mischen</button>

{#each items as item (item)}

{ item }

</div>

{/each}

// Mit Key-Funktion für stabile IDs

{#each items as item (item.id)}

{/each}

Tipp: Für animate:flip ist eine stabile Key-Funktion wichtig – die Elemente müssen eindeutig identifizierbar sein (z.B. mit item.id). Die Animation wird dann automatisch beim Hinzufügen, Entfernen oder Neuanordnen ausgeführt.

Fortgeschrittene Animationen – Motion, Tweened, Spring

tweened · spring · motion

import { tweened, spring } from 'svelte/motion'; const progress = tweened(0, { duration: 500 }); const size = spring(100, { stiffness: 0.3, damping: 0.8 });

Motion bietet erweiterte Animationen mit tweened (geglättete Wertänderungen) und spring (physikbasierte Animationen) – perfekt für flüssige Übergänge in Zahlen, Positionen oder Skalierungen.

Beispiele

import { tweened, spring } from 'svelte/motion';

import { sineOut } from 'svelte/easing';

// Tweened - geglättete Werte

const progress = tweened(0, { duration: 800, easing: sineOut });

// Spring - physikbasiert

const x = spring(0, { stiffness: 0.4, damping: 0.6 });

const y = spring(0, { stiffness: 0.4, damping: 0.6 });

// Setzen neuer Werte

function animateProgress() {

progress.set(100);

}

function moveBox(event) {

x.set(event.clientX);

y.set(event.clientY);

}

</script>

{ $progress }%

</div>

</div>

<style>

.bar { height: 30px; background: #ff3e00; color: white; transition: none; }

</style>

Tipp: spring erzeugt natürliche, physikbasierte Animationen – ideal für UI-Interaktionen wie Drag & Drop oder Scroll-Effekte. tweened ist perfekt für kontrollierte, gleichmäßige Übergänge (z.B. Fortschrittsbalken).

Svelte Animationen im Überblick

transition Ein-/Aus-Animationen
fade, slide, fly, scale

in / out Getrennte Animationen
verschiedene in/out Effekte

animate Listen-Animationen
flip, key

Keyframes CSS-Animationen
@keyframes, use:animate

Custom Eigene Transitionen
JS/CSS

Motion Wert-Animationen
tweened, spring

Quick Summary

fade

Ein-/Ausblenden

slide

Ein-/Ausfahren

fly

Fliegen

scale

Skalieren

draw

SVG zeichnen

flip

Listen animieren

transition:fade={ {duration: 500} } · in:fade out:fly · animate:flip