popover 属性关闭时为什么没有动画：CSS 离散过渡、overlay 与 top-layer 的退出顺序

Popover 打开时看得到淡入，关闭时却像被剪掉，最常见的原因不是 opacity 过渡失效，而是浏览器先把 display 切成 none，同时把元素从 top-layer 移走了。离场动画还没走完，内容已经不再参与绘制。

要让关闭动画完整可见，需要让 display 和 overlay 也进入过渡列表，并用 allow-discrete 延后它们的离散切换；首次打开则用 @starting-style 提供起始值。

只写 opacity 时，关闭链路在哪里断了

先看一个容易误判的最小例子：

打开帮助
操作说明

[popover] {
  opacity: 0;
  transition: opacity .25s;
}

[popover]:popover-open {
  opacity: 1;
}

打开时，元素从隐藏状态进入显示状态，部分浏览器看起来仍会完成淡入；但关闭动作会同时触发两个离散变化：display 从可见值变为 none，overlay 从 auto 变回 none。如果这两个属性不在过渡列表中，浏览器可以立刻完成切换，opacity 还没降到 0，元素就已经消失。

这里的关键节点是 display、overlay 和 top-layer。它们不是三个可以随意替换的动画标签：display 决定是否绘制，overlay 决定何时离开顶层，top-layer 是 Popover 所在的浏览器顶层容器。

把离散属性加入过渡，关闭动画才能走完

真正需要保留的是下面这段关系：opacity 负责视觉变化，display 在离场结束前保持可见，overlay 在离场结束前保持顶层归属。

[popover] {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .25s,
    transform .25s,
    display .25s allow-discrete,
    overlay .25s allow-discrete;
}

[popover]:popover-open {
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: translateY(8px);
  }
}

allow-discrete 不会把 display 变成连续插值动画，它只是允许离散值按过渡时序切换。关闭时，元素在整个过渡期间保持可见，到了末尾才切换为 display: none；overlay 也在动画结束后才把它移出 top-layer。

@starting-style 解决的是另一件事：Popover 第一次打开时没有可见的旧样式，浏览器无法凭空找到 opacity 和 transform 的起点。把起点写进 @starting-style，首次显示才有稳定的淡入和位移动画。

不要把 overlay 当成装饰属性

只加 display .25s allow-discrete，通常已经能看到一部分离场效果，但复杂场景仍可能在顶层移除时被截断。Popover 处在 top-layer 时，不受普通定位上下文和 z-index 竞争影响；关闭时如果 overlay 立即变为 none，它会提前离开这层。

因此，display 和 overlay 要成对处理。它们共同构成“继续显示并留在顶层”的等待链，视觉属性只是这条链上的变化部分。

浏览器不支持时，怎样保留可用性

Popover API、:popover-open、@starting-style 和离散过渡能力并不是所有旧浏览器都同时具备。渐进增强时，先保证按钮仍能触发内容，再把动画当成增强层。

const help = document.querySelector('#help');
const supportsPopover = Object.hasOwn(HTMLElement.prototype, 'showPopover');

if (!supportsPopover) {
  help.hidden = false;
  help.classList.add('popover-fallback');
}

降级实现不要继续依赖 :popover-open 作为唯一可见条件，也不要在不支持时调用 showPopover()。如果项目必须覆盖旧环境，可以用普通的 hidden 或 class 切换做即时显示，保持关闭按钮和键盘焦点逻辑可用；支持完整能力的浏览器再启用上面的离散过渡。

常见误区与验收方法

把 transform 写好就够了吗

不够。transform 和 opacity 只能改变已经参与绘制的元素，不能阻止 display 或 overlay 提前结束元素的生命周期。

为什么首次打开没有淡入

检查 @starting-style 是否和打开态选择器匹配，并确认它放在同等特异性的打开态规则之后。没有起始样式时，首次渲染可能直接落到最终值。

怎么确认离场链真的完整

在浏览器开发者工具里观察弹窗关闭的 250 毫秒：内容应继续可见，随后才从 top-layer 消失并进入隐藏状态。再检查无障碍行为，关闭后弹窗不应继续接受焦点。

采用前的最小检查清单

• 打开态是否用 :popover-open 写出最终视觉值。
• 首次打开是否有 @starting-style 起点。
• 过渡列表是否同时包含 display 和 overlay。
• 两个离散属性是否带 allow-discrete。
• 旧浏览器是否有不依赖 Popover API 的可用降级。

延伸问答

Popover 和 dialog 的动画写法能完全复用吗

CSS 的离散过渡思路相近，但语义和关闭方式不同。模态确认流程应优先使用 dialog 的语义，不能只因为动画写法相似就互换元素。

beforetoggle 适合拿来做什么

它适合在状态即将改变时记录或校验条件，例如打开前检查数据是否准备好；真正的状态变化完成后再用 toggle 做后续处理。

Popover 关闭动画的验收重点不是“有没有渐变”，而是离散状态有没有按顺序退出：先完成 opacity 和 transform，再切换 display、移出 top-layer。把这条顺序写进 CSS，问题就从玄学动画变成可检查的状态链。