Modern Web Guidance：让AI生成更规范的模态框过渡动画

当你在AI工作流中实现模态对话框（Modal Dialog）的平滑进出场动画，尤其是涉及顶层（top layer）元素时，往往容易踩坑。谷歌推出的 Modern Web Guidance 技能，旨在引导AI编码代理生成更符合现代Web标准的代码。本文基于最新演示视频，对比了使用与不使用该技能时，AI生成的模态框过渡代码差异，并分析其背后的最佳实践。

引导式AI如何改变代码生成

视频演示中，左侧为未引导的AI代理，右侧为启用了 Modern Web Guidance 的代理。输入相同的提示词后，右侧代理在编码前主动搜索了“details modal slide smooth transition”，并匹配到“animate to from top layer”指南，该指南被实时渐进式披露。这种检索增强的生成方式，让AI在动手前就获得了针对性的规范知识。

指南被实时检索并披露

未引导的代理虽然也完成了功能，但其实现存在明显缺陷：它将模态框转换为抽屉（drawer），并添加了透明度、变换和过渡属性，但关闭时元素仍保留在DOM中并占据空间。理想情况下，可关闭的对话框或抽屉应从布局中完全移除。

关键差异：overlay与离散过渡

右侧引导式代理生成的代码则遵循了多项最佳实践。在 modal.css 中，过渡属性列表包含了 overlay，以支持顶层元素的移动动画，同时为 display 属性应用了 allow-discrete，确保元素在动画结束后才从渲染树中移除。

过渡属性包含overlay与allow-discrete

此外，起始样式块（@starting-style）被正确地放置在打开状态选择器内部或之后，以保证层叠正确，并且被排除在退出动画之外。实际效果是：元素先平滑移出屏幕，然后干净地从DOM中移除，符合预期。

顶层的渲染机制：HTML 的顶层（top layer）是一个脱离常规层叠上下文、渲染在所有其他内容之上的特殊层，<dialog> 的 showModal()、全屏元素以及 popover 都位于其中。顶层元素不受父级 z-index、transform 或 overflow 裁剪的影响，这也是引导方案无需 z-index hack 的根本原因。与之对应，CSS 的 overlay 属性本身并不产生视觉效果，而是告诉浏览器该元素参与了顶层动画：当元素即将离开顶层时，浏览器会推迟其从顶层移除的时机，直到过渡结束，从而让退出动画得以完整播放。

离散动画与 allow-discrete：display、overlay 这类属性属于离散（discrete）属性，取值之间没有可插值的中间状态，传统上变化会瞬间生效。transition-behavior: allow-discrete 允许这类属性参与过渡，浏览器会在过渡的 0% 和 100% 两个关键点分别应用起止值，从而实现“先动画、后移除”的效果。

@starting-style 的作用：元素首次渲染或从 display: none 变为可见时，浏览器不会为其生成“之前”的样式，因此入场过渡缺少起点。@starting-style 规则专门用于声明元素进入时的初始样式，使 opacity、transform 等属性能够从该起点平滑过渡到打开状态。它必须位于打开状态选择器之后或内部以保证层叠顺序正确，并且由于它只在元素进入时生效，自然不会干扰退出动画。需要注意的是，@starting-style 的优先级规则与普通声明一致，写在选择器内部时等同于为该状态添加一条初始快照。

实际运行对比：Z-index黑客 vs. 原生顶层

在Chrome中实际测试，未引导方案点击书籍时，对话框组件保持活动并修改了z-index，仅沿X轴平移。而引导方案中，原生对话框平滑过渡，DevTools检查器显示该元素正确位于顶层（top layer），无需z-index hack即可渲染在其他内容之上。

未引导方案依赖z-index调整

引导方案正确使用顶层，无需z-index hack

最后，@starting-style 规则被正确应用，开发者可以在DevTools中切换顶层状态进行验证。同样的意图，产出代码质量截然不同——Modern Web Guidance 确保你的代码开箱即用地利用原生浏览器能力。

如何启用

你可以在 anti-gravity 中启用该技能，或通过你喜欢的编码代理安装。官方安装地址为 goo.gle/mwg。对于频繁处理交互细节的前端团队，这能显著减少调试过渡动画和层叠问题的时间。

分析：为什么这很重要

AI编码代理的短板往往不在于语法，而在于对平台最新特性的认知滞后。Modern Web Guidance 通过结构化的指南检索，将最佳实践注入生成过程，弥补了这一鸿沟。从演示看，引导后的代码不仅更简洁（移除了不必要的DOM保留），还更符合可访问性与性能原则。随着浏览器原生能力增强，此类“知识增强”的AI工作流有望成为前端开发的标准配置。