Auto-animate hat einen offiziellen Adapter für Marko 6 veröffentlicht, mit dem Entwickler Listenänderungen mit nur einem Tag und ohne benutzerdefinierten Code animieren können. Das Paket lässt sich einfach via npm installieren, wird als AutoAnimate importiert und funktioniert sofort für Hinzufügen, Entfernen und Umordnen.

Warum Marko dies benötigte

Markos Rendering-Modell überspringt den üblichen Hydrierungsschritt. Der Server streamt HTML, der Client „setzt“ genau an dem Punkt fort, an dem der Server aufgehört hat, und kein zweiter Render-Vorgang baut einen Komponententree neu auf. Da das Framework mit kaum JavaScript ausgeliefert wird, würde jede zusätzliche Bibliothek, die eine schwere Runtime injiziert, diesen Vorteil zunichtemachen.

Der neue Adapter hängt direkt an den echten DOM-Knoten an, die Marko bereits liefert. Er erstellt einen MutationObserver – eine Browser-API, die DOM-Änderungen überwacht – und löst die Transition-Logik von Auto-animate aus, wann immer die zugrunde liegenden Daten der Liste mutieren. In der Praxis müssen Entwickler lediglich ihre Daten ändern; das DOM aktualisiert und animiert sich automatisch.

Erste Schritte

  1. Das Kernpaket installieren 

    npm install @formkit/auto-animate

  2. Den Marko-spezifischen Adapter hinzufügen 

    import AutoAnimate from "@formkit/auto-animate/marko"

  3. Das Elternelement der Liste mit <AutoAnimate> umschließen.

Das ist alles. Keine Hooks, keine zusätzlichen Direktiven, kein manuelles Lifecycle-Management.

Vite-Tipp

Neue Vite-Projekte werfen manchmal einen Import-Fehler für den Adapter aus. Das Hinzufügen des folgenden Codes zu vite.config.ts löst das Problem:

optimizeDeps: {
  exclude: ["@formkit/auto-animate"]
}

Durch den Ausschluss kann Markos eigenes Plugin das Paket verarbeiten, anstatt der Vite-Optimizer.

Was Entwickler gewinnen

  • Geringer Footprint – Der Adapter fügt nur den Code hinzu, der zur Beobachtung von DOM-Mutationen benötigt wird; er bläht Markos bereits schlankes Bundle nicht auf.
  • Reaktives Umschalten – Ein einfaches reaktives Attribut kann Animationen zur Laufzeit ein- oder ausschalten.
  • Kein Overhead – Es ist nicht nötig, Animationslogik pro Element zu schreiben oder Mount/Unmount-Hooks zu verwalten.
  • Automatische Bereinigung – Das Tag gibt seinen Observer frei, wenn die Komponente unmounted wird, um Speicherlecks zu verhindern.

Eine Live-Demo zeigt die vollständige API, einschließlich optionaler Plugins für Bounce- und Spring-Effekte. Der Sandbox-Link ist in der ursprünglichen Ankündigung enthalten.

Mögliche Nachteile

Der Adapter konzentriert sich auf Listenanimationen; komplexere Choreografien (z. B. zeitversetztes Erscheinen nicht zusammenhängender Elemente) erfordern weiterhin benutzerdefinierten Code oder eine andere Bibliothek. Entwickler, die Vite verwenden, müssen an die Konfigurationsanpassung denken, sonst tritt ein Import-Fehler auf. Da der Mechanismus auf MutationObserver basiert, werden Umgebungen ohne vollständiges DOM (wie Server-Side-Rendering-Tests) die Animationen nicht sehen, obwohl sie die Benutzeroberfläche nicht beeinträchtigen werden.

Ausblick

Die Maintainer von Auto-animate haben zusätzliche Adapter für andere Frameworks angedeutet, die Markos „Resume-from-HTML“-Philosophie teilen. Sollte das Marko-Plugin populär werden, könnten in den kommenden Monaten Community-Erweiterungen wie Drag-and-Drop-Unterstützung oder die Integration von State-Management-Bibliotheken erscheinen.

Fazit: Durch die Kombination der deklarativen Transition-Engine von Auto-animate mit Markos Minimal-Runtime-Ansatz liefert der neue Adapter Listenanimationen, die die Bundle-Größe kaum beeinflussen und keinen zusätzlichen Code erfordern, wodurch die Developer Experience so reibungslos bleibt wie das Framework selbst.