Auto-animate 为 Marko 6 发布了官方适配器，让开发者只需使用单个标签即可实现列表变化的动画效果，无需编写自定义代码。该包可以通过 npm 安装，导入为 AutoAnimate，并能开箱即用地处理添加、删除和重新排序。
为什么 Marko 需要它
Marko 的渲染模型跳过了通常的注水（hydration）步骤。服务器流式传输 HTML，客户端从服务器停止的确切点“恢复”，且不需要通过第二次渲染来重建组件树。由于该框架几乎不附带任何 JavaScript，任何注入沉重运行时的额外库都会抵消这一优势。
新的适配器直接挂载到 Marko 已经交付的真实 DOM 节点上。它创建了一个 MutationObserver——一个用于监听 DOM 变化的浏览器 API——并在列表底层数据发生变化时触发 auto-animate 的过渡逻辑。在实践中，开发者只需修改其数据；DOM 就会自动更新并执行动画。
入门指南
安装核心包
npm install @formkit/auto-animate引入 Marko 专用适配器
import AutoAnimate from "@formkit/auto-animate/marko"使用
<AutoAnimate>包裹列表的父元素。
就这么简单。无需 Hook，无需额外的指令，也无需手动管理生命周期。
Vite 小贴士
新的 Vite 项目有时会对适配器抛出导入错误。在 vite.config.ts 中添加以下内容即可解决该问题：
optimizeDeps: {
exclude: ["@formkit/auto-animate"]
}
这种排除方式让 Marko 自己的插件来处理该包，而不是由 Vite 的优化器处理。
开发者能获得什么
- 极小的体积 – 适配器仅添加观察 DOM 变化所需的代码；它不会增加 Marko 本就精简的包体积。
- 响应式切换 – 一个简单的响应式属性即可在运行时开启或关闭动画。
- 零繁琐操作 – 无需编写每个项目的动画逻辑，也无需管理挂载/卸载（mount/unmount）钩子。
- 自动清理 – 当组件卸载时，该标签会销毁其观察器，从而防止内存泄漏。
一个实时演示展示了完整的 API，包括用于弹跳（bounce）和弹簧（spring）效果的可选插件。沙盒链接已在原始公告中提供。
可能的缺点
该适配器专注于列表动画；更复杂的编排（例如不相关元素的交错入场）仍需要自定义代码或使用不同的库。使用 Vite 的开发者必须记得进行配置调整，否则会遇到导入错误。最后，由于该机制依赖于 MutationObserver，在没有完整 DOM 的环境（如服务端渲染测试）中将无法看到动画，不过这也不会破坏 UI。
后续关注
Auto-animate 的维护者已经暗示，未来会为其他同样遵循 Marko “从 HTML 恢复”理念的框架推出更多适配器。如果 Marko 插件证明受欢迎，我们可能会在未来几个月看到社区贡献的扩展——例如拖放支持或与状态管理库的集成。
核心要点： 通过将 auto-animate 的声明式过渡引擎与 Marko 的极简运行时方法相结合，新的适配器实现了几乎不增加包体积且无需额外代码的列表动画，使开发体验像框架本身一样顺畅无阻。