Auto-Animateは、Marko 6向けの最初の公式アダプターをリリースしました。これにより、開発者は追加のJavaScriptを書くことなく、単一のタグだけでリストの変更をアニメーション化できるようになります。この動きは重要です。なぜなら、Markoプロジェクトにおけるモーション（動き）を、長らく「特別なケース」として扱う必要があったボイラープレート（定型コード）を取り除いてくれるからです。

Markoのレンダリングモデルは、ReactやVueなどのフレームワークが依存しているクライアントサイドの「ハイドレーション（hydration）」ステップをスキップします。サーバーがHTMLを送信した後、Markoはそのマークアップをその場でそのまま再開するため、バンドルサイズを非常に小さく（ランタイムはgzippedで約7KB）保つことができます。しかし、このショートカットのせいで、クライアントサイドでのレンダリングを待ってからエフェクトを付加する多くのアニメーションライブラリが利用できなくなっていました。既存のDOMへのフックがないため、開発者は従来、リストの更新ごとにカスタムコードを書く必要がありました。

この新しいアダプターは、MarkoのonMountライフサイクルにフックすることで、その制限を回避します。コンポーネントがマウントされると、アダプターはMutationObserverを作成し、リストの親ノードの変更を監視します。アイテムが追加、フィルタリング、またはシャッフルされると、オブザーバーがauto-animateの組み込みトランジションエンジンをトリガーし、スムーズなエントリー、エグジット、および並べ替えのアニメーションを自動的に提供します。これらすべてが、単一の<auto-animate>タグの後ろで実行されます。

このタグは3つの属性を受け入れます：

  • parent – リストコンテナを指すMarkoタグ変数。
  • options – duration（持続時間）、easing（イージング）、その他のタイミング設定のためのオブジェクト。
  • enabled – 実行時にアニメーションのオン/オフを切り替えられるリアクティブなブーリアン値。

enabledはリアクティブであるため、開発者はDOMに触れたりハンドラーを書き直したりすることなく、任意のステート値にバインドしてモーションを切り替えることができます。したがって、このアダプターは、コンポーネントツリーの他の部分には影響を与えないまま、静的なディレクティブよりも高い柔軟性を提供します。

Viteを使用しているチームの場合、このパッケージによって「unresolved import（解決できないインポート）」という警告が発生することがあります。vite.config.tsに以下を追加することで、この問題を解決できます：

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

これにより、Viteはインポートをプリバンドルしようとするのではなく、Markoのプラグインに処理を任せるようになります。

実用的なメリットはすぐに現れます。以前はuseEffectフック、手動のクラス切り替え、そして数行のアニメーションコードが必要だった典型的なMarkoのリストが、次のように記述できるようになります：

<auto-animate parent=items enabled=showAnimations options={duration: 300}>
  <ul>
    $ for|item| of=items
      <li>${item.name}</li>
    $ end
  </ul>
</auto-animate>

追加のJavaScriptも、追加のバンドル重量も必要なく、auto-animateが他のフレームワークに提供しているものと同じスムーズなモーションが得られます。

勝者と注視すべき点

すでにMarkoを採用しているフロントエンドチームは、頻繁に利用されるUIパターンである「動的なリスト」に対して、すぐに使えるソリューションを手に入れました。アダプターの軽量な性質により、パフォーマンスが重要なサイトにとって極めて重要な、Markoの特徴である「極小のバンドルサイズ」が維持されます。一方で、このアダプターは現在リストの変更（mutation）に焦点を当てています。独自のタイムライン制御や複雑なコレオグラフィー（動きの構成）を必要とする開発者は、引き続きカスタムコードや他のライブラリを使用する必要があります。

次に注目すべきこと

このアダプターはオープンソースであり、リリースノートにはすでにデモ用のサンドボックスへのリンクがあります。コミュニティのフィードバックによって、グリッドのリフロー（再配置）のサポートや、Markoの次期コンポーネントレベルのトランジションとの統合など、将来的な拡張が形作られていくでしょう。もし採用曲線がReactやVueにおけるauto-animateの急速な普及と同様の動きを見せるなら、JavaScript UIエコシステム全体で「ゼロコード」モーションへの大きな推進力が見られるかもしれません。

要点: Auto-AnimateのMarko 6アダプターは、歴史的に煩雑なタスクであった「サーバーレンダリングされたリストのアニメーション化」を、単一の宣言的なタグへと変貌させます。これにより、Markoの最小限のバンドルサイズを維持しながら、開発者に即座に切り替え可能なモーションレイヤーを提供します。