怎样在CSS中使用:popover-open伪类定义现代原生弹出层的动画过渡？-css教程-PHP中文网

:popover-open伪类不触发动画且无法直接定义过渡，因其仅为离散状态标识符；正确做法是通过beforetoggle事件切换class，再用css transition控制transform/opacity等可动画属性。

怎样在css中使用:popover-open伪类定义现代原生弹出层的动画过渡？

:popover-open 伪类本身**不触发动画**，也不能直接定义过渡——它只是个状态标识符，浏览器目前（截至 Chrome 123 / Safari 17.4）对它的支持仍限于选择器匹配，transition 和 @keyframes 都无法基于它自动生效。

为什么 `:popover-open` 不能直接写 `transition`？

因为 :popover-open 不是“属性变化”，而是元素在 popover 显示/隐藏时的**离散状态切换**。浏览器不会在 open 属性或 showPopover() 调用前后自动触发 CSS 属性插值——它不像 :hover 或 [data-state="open"] 那样伴随可过渡的样式属性变更。

尝试写 popover:popover-open { opacity: 1; transition: opacity 0.3s; } → 无效，opacity 不会渐变
:popover-open 匹配时，元素已处于“已渲染、已定位、已可见”状态，没有中间帧
当前规范未定义该伪类与 CSS 动画系统的联动机制

正确做法：用 `transition` + `transform`/`opacity` 配合 `popover` 的显示逻辑

必须手动控制可动画的属性，并利用 popover 的生命周期钩子（如 beforetoggle 事件）来切换 class，再让 CSS 基于 class 过渡。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

给 popover 元素添加初始 class，例如 class="popover-fade"
监听 beforetoggle 事件，在 event.state === "open" 时添加 is-open 类；关闭时移除
用 .popover-fade.is-open 定义进入动画，.popover-fade 定义退出动画（需配合 animation-fill-mode: forwards 或 transition 反向）

// HTML
<div id="my-popover" popover>内容</div>
<p>// JS
const popover = document.getElementById("my-popover");
popover.addEventListener("beforetoggle", (e) => {
if (e.state === "open") {
popover.classList.add("is-open");
} else {
popover.classList.remove("is-open");
}
});</p>

/* CSS */
.popover-fade {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.popover-fade.is-open {
  opacity: 1;
  transform: scale(1);
}