Auto-animateがMarko 6向けの公式アダプターをリリースしました。これにより、開発者はカスタムコードを書くことなく、単一のタグだけでリストの変化をアニメーションさせることができます。このパッケージはnpm経由で導入でき、AutoAnimateとしてインポートすることで、要素の追加、削除、並べ替えに対して即座に機能します。
なぜMarkoにこれが必要だったのか
Markoのレンダリングモデルは、通常のハイドレーション（hydration）ステップをスキップします。サーバーがHTMLをストリーム配信し、クライアントはサーバーが停止した正確な地点から「再開（resume）」するため、コンポーネントツリーを再構築するための2回目のレンダリングは行われません。このフレームワークはJavaScriptをほとんど含まずに提供されているため、重いランタイムを注入する追加ライブラリは、その利点を打ち消してしまいます。
新しいアダプターは、Markoがすでに配信している実際のDOMノードに直接フックします。これは、DOMの変化を監視するブラウザAPIであるMutationObserverを作成し、リストの基盤となるデータが変化するたびにauto-animateのトランジションロジックをトリガーします。実際には、開発者はデータを変更するだけで済みます。DOMは自動的に更新され、アニメーションされます。
はじめに
コアパッケージをインストールする
npm install @formkit/auto-animateMarko専用のアダプターを取り込む
import AutoAnimate from "@formkit/auto-animate/marko"リストの親要素を
<AutoAnimate>で囲む。
これだけです。フックも、追加のディレクティブも、手動のライフサイクル管理も必要ありません。
Viteのヒント
新しいViteプロジェクトでは、アダプターのインポートエラーが発生することがあります。vite.config.tsに以下を追加することで解決できます。
optimizeDeps: {
exclude: ["@formkit/auto-animate"]
}
この除外設定により、Viteのオプティマイザーではなく、Marko自身のプラグインがパッケージを処理できるようになります。
開発者が得られるメリット
- 極めて軽量 – アダプターはDOMの変更を監視するために必要なコードのみを追加するため、Markoのすでに軽量なバンドルサイズを膨らませることはありません。
- リアクティブな切り替え – シンプルなリアクティブ属性を使用して、実行時にアニメーションのオン/オフを切り替えられます。
- 手間いらず（Zero ceremony） – アイテムごとのアニメーションロジックを書いたり、マウント/アンマウントのフックを管理したりする必要はありません。
- 自動クリーンアップ – コンポーネントがアンマウントされると、タグがオブザーバーを破棄するため、メモリリークを防ぎます。
ライブデモでは、バウンス（bounce）やスプリング（spring）スタイルのエフェクト用のオプションプラグインを含む、完全なAPIを確認できます。サンドボックスのリンクは、元の発表に記載されています。
考えられるデメリット
このアダプターはリストのアニメーションに特化しています。より複雑な演出（例：無関係な要素の段階的な登場など）には、依然としてカスタムコードや別のライブラリが必要です。Viteを使用している開発者は、設定の調整を忘れないようにする必要があります。さもないとインポートエラーが発生します。最後に、この仕組みはMutationObserverに依存しているため、完全なDOMがない環境（サーバーサイドレンダリングのテストなど）ではアニメーションは表示されませんが、UIが壊れることもありません。
今後の注目点
Auto-animateのメンテナーは、Markoと同じ「HTMLからの再開」という哲学を共有する他のフレームワーク向けのアダプターについても示唆しています。もしMarkoプラグインが普及すれば、ドラッグ＆ドロップのサポートや状態管理ライブラリとの統合といった、コミュニティによる拡張機能が今後数ヶ月以内に登場する可能性があります。
まとめ: auto-animateの宣言的なトランジションエンジンとMarkoの最小限のランタイムアプローチを組み合わせることで、この新しいアダプターは、バンドルサイズへの影響をほとんど与えず、追加コードも不要なリストアニメーションを実現し、フレームワーク自体と同様に摩擦のない開発体験を提供します。