Auto-Animate 发布了其首个针对 Marko 6 的官方适配器，让开发者只需使用单个标签即可实现列表变化的动画效果，且无需额外的 JavaScript。这一举措意义重大，因为它消除了长期以来让 Marko 项目中的动画效果显得像是一种“特殊情况”处理的样板代码。

Marko 的渲染模型跳过了 React 或 Vue 等框架所依赖的客户端“注水”（hydration）步骤。在服务器发送 HTML 后，Marko 直接在原位恢复该标记，这使得 bundle 体积保持极小——运行时经过 gzip 压缩后仅约 7 KB。然而，同样的捷径也阻碍了许多动画库的使用，因为这些库通常需要等待客户端渲染完成后才能挂载效果。由于无法接入已存在的 DOM，开发者传统上必须为每一次列表更新编写自定义代码。

新的适配器通过挂载到 Marko 的 onMount 生命周期钩子，巧妙地绕过了这一限制。当组件挂载时，适配器会创建一个 MutationObserver 来监听列表父节点的变更。随着项目的推送、过滤或重新排序，该观察器会触发 auto-animate 内置的过渡引擎，自动实现平滑的进入、退出和重新排序动画。所有这些操作都通过一个简单的 <auto-animate> 标签即可完成。

该标签接受三个属性：

  • parent – 一个指向列表容器的 Marko 标签变量。
  • options – 一个用于设置持续时间、缓动函数和其他定时参数的对象。
  • enabled – 一个响应式布尔值，可以在运行时开启或关闭动画。

由于 enabled 是响应式的，开发者可以将其绑定到任何状态值，从而在不操作 DOM 或重写处理程序的情况下切换动画效果。因此，该适配器比静态指令提供了更高的灵活性，同时对组件树的其他部分保持透明。

对于使用 Vite 的团队，该包可能会导致“unresolved import”（未解析的导入）警告。在 vite.config.ts 中添加以下内容即可解决此问题：

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

这会告知 Vite 让 Marko 的插件来处理导入，而不是尝试对其进行预构建（pre-bundle）。

实际收益是立竿见影的。以前一个典型的 Marko 列表需要 useEffect 钩子、手动切换类名以及几行动画代码，现在可以写成：

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

无需额外的 JavaScript，无需增加 bundle 体积，且能获得与其他框架相同的 auto-animate 平滑动画效果。

谁受益，谁观望

已经采用 Marko 的前端团队获得了一个针对常见 UI 模式（动态列表）的现成解决方案。适配器的轻量化特性保留了 Marko 体积极小的标志性优势，这对于性能至关重要的网站来说至关重要。另一方面，该适配器目前专注于列表变更；对于需要自定义时间轴控制或复杂编排效果的开发者，仍需回退到编写自定义代码或使用其他库。

后续关注点

该适配器是开源的，发布说明中已经附带了演示沙盒链接。社区反馈可能会塑造未来的扩展功能，例如支持网格重排（grid reflows）或与 Marko 即将推出的组件级过渡功能集成。如果采用曲线能反映出 auto-animate 在 React 和 Vue 中的快速普及，我们可能会看到 JavaScript UI 生态系统中“零代码”动画运动的更广泛推动。

核心要点： Auto-Animate 的 Marko 6 适配器将一项历史上繁琐的任务——为服务端渲染的列表添加动画——转变为一个简单的声明式标签，在保持 Marko 极小 bundle 体积的同时，为开发者提供了一个即插即用的、可切换的动画层。