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.