Svelte kompakt erklärt – Teil 4: Interaktion mit dem DOM: Transitions, Actions und Animationen in Svelte

Svelte bietet nicht nur eine einfache und reaktive Architektur, sondern auch eingebaute Mechanismen zur DOM-Interaktion, die andere Frameworks oft extern lösen müssen. Ob sichtbare Übergänge, DOM-Manipulation oder aufwändige Animationen – alles lässt sich mit Bordmitteln umsetzen. Dieser Artikel zeigt, wie Transitions, Actions und Animationen in Svelte funktionieren.

🌀 Transitions – sanfte Übergänge bei DOM-Veränderungen

Transitions in Svelte sind denkbar einfach: Sobald ein Element aus dem DOM entfernt oder hinzugefügt wird, kann eine Transition mit nur einer Zeile definiert werden.

Beispiel: Fade

<script>
  import { fade } from 'svelte/transition';
  let visible = true;
</script>

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

{#if visible}
  <p transition:fade>Ich erscheine mit Fade-Effekt</p>
{/if}

Eingebaute Transitions:

• fade
• slide
• scale
• fly
• blur
• draw (für SVG)

Anpassung mit Parametern:

<p transition:fly={{ y: 20, duration: 500 }}>Text mit Fly-Effekt</p>

👉 Vorteil: Transitions werden automatisch nur beim Ein-/Ausfügen angewendet – kein manuelles Mount/Unmount-Handling nötig.

🛠 Actions – direkter Zugriff auf das DOM

Actions ermöglichen direkten Zugriff auf DOM-Elemente bei ihrer Einfügung. Ideal für Custom-Logik, externe Libraries oder Low-Level-Manipulation.

Beispiel: Tooltip als Action

// tooltip.js
export function tooltip(node, text) {
  const title = document.createElement('span');
  title.textContent = text;
  title.style =
    'position:absolute; background:black; color:white; padding:2px;';
  node.addEventListener('mouseenter', () => node.appendChild(title));
  node.addEventListener('mouseleave', () => node.removeChild(title));
  return {
    destroy() {
      node.removeEventListener('mouseenter');
      node.removeEventListener('mouseleave');
    },
  };
}

Verwendung:

<div use:tooltip={'Mehr Infos'}>Element mit Tooltip</div>

Einsatzbereiche:

• Tooltips
• Intersection Observer
• Fokus-Handling
• Einbindung von D3, Three.js u. a.

🎬 Animationen – bei Layoutveränderungen

Neben Transitions (Ein-/Ausblenden) unterstützt Svelte auch Animationen bei Positionswechseln.

Beispiel: Liste mit Flip-Animation

<script>
  import { flip } from 'svelte/animate';
  let items = ['A', 'B', 'C'];
</script>

<ul>
  {#each items as item (item)}
    <li animate:flip>{item}</li>
  {/each}
</ul>

Hier sorgt flip dafür, dass DOM-Elemente bei Änderungen animiert an ihre neue Position gleiten – ideal für Sortierfunktionen, Drag & Drop oder dynamische UIs.

⚙️ Kombination mit Tailwind & Custom Styles

Transitions und Animationen lassen sich auch mit Tailwind kombinieren, z. B.:

<p class="transition-opacity duration-500" class:opacity-0={!visible}>
  Mit Tailwind animiert
</p>

Oder in Kombination mit in: und out: Transitions sowie CSS-Keyframes.

📌 Ein letzter Gedanke (Teil 4)

Svelte bietet leistungsstarke und dennoch einfache Mittel, um DOM-Interaktionen elegant zu gestalten. Transitions, Actions und Animationen sind nativ integriert, arbeiten perfekt mit der Reaktivität zusammen und benötigen weder Zusatzpakete noch aufwendige Workarounds. Wer komplexe UI-Interaktionen effizient und klar umsetzen möchte, findet in Svelte ein hervorragend abgestimmtes Werkzeug.

Wann Sveltes eingebaute Animationen nicht reichen

Die nativen Tools sind elegant, aber haben klare Grenzen:

• Bei komplexen sequenzierten Animationen mit Timeline-Logik: Hier ist GSAP weiterhin überlegen. Wer einen Hero-Bereich mit aufeinanderfolgenden Tween-Stufen baut, kommt mit Sveltes Transitions schnell an Komplexitäts-Grenzen.
• Bei physikbasierter Animation: tweened und spring decken Standard-Cases ab, aber wer realistische Physik (Bouncing, Gravitation, Constraints) braucht, ist mit Frameworks wie Motion (formerly Framer Motion) oder PopMotion besser bedient.
• Bei SVG-Morphing oder Path-Animation: Sveltes Transitions sind primär für Element-Ein-/Ausblendungen gedacht. Für komplexe Path-Animationen ist SVG-Direct-Manipulation oder GSAP MorphSVG besser.

Performance-Tipps aus der Praxis

• transform statt top/left: Sveltes fly-Transition nutzt das schon richtig. Eigene Custom-Transitions sollten ebenfalls auf GPU-beschleunigte Properties setzen.
• will-change nur temporär: Nicht permanent setzen — das kostet Speicher. Beim Beginn der Animation aktivieren, am Ende wieder entfernen.
• prefers-reduced-motion respektieren: Wer Animationen baut, sollte sie für Nutzer mit Bewegungspräferenzen ausblenden. Sveltes Transitions haben kein eingebautes Reduced-Motion-Handling — das muss manuell ergänzt werden.

Wann komplett auf Animationen verzichten?

• Bei stark akzessibilitätskritischen Anwendungen: Behörden-Sites, Versicherungs-Portale, ältere Zielgruppen — hier sind reduzierte Animationen oft besser.
• Bei sehr hohen Performance-Anforderungen auf Low-End-Geräten: Animationen verbrauchen GPU- und CPU-Zyklen, die bei schwächeren Geräten knapp sind. Bei Sites für aufstrebende Märkte oder Bildungsbereiche oft besser zu minimieren.
• Bei reinen Informations-Anwendungen ohne Branding-Bedarf: Wikipedia, Dokumentations-Portale, Behörden-Seiten profitieren wenig von Animationen — sie kosten mehr Performance, als sie Nutzwert bringen.