CSS transition对popover属性无效果，是设计如此还是Bug？

测试原生popover属性时，尝试为其切换操作添加CSS transition过渡效果，但效果未生效。opacity样式已成功应用，但过渡完全不可见。请问这是设计特性还是Bug？

代码示例 #

CSS

[popover] {
  opacity: 0;
  transition: opacity 1s;
}

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

HTML

<button popovertarget="theonepopover">Click me to trigger the popover</button>
<div id="theonepopover" popover>Hi, I'm a popover</div>

这是设计特性，不是Bug。

原生popover元素默认通过display: none和display: block（或对应显示类型）切换显隐状态，而CSS transition无法作用于display属性的变化——当元素从display: none变为显示状态时，浏览器会直接将元素渲染到页面，不会触发opacity的过渡动画，因为初始的opacity: 0状态从未在页面上实际生效过（元素根本不在布局流中）。

解决方案 #

使用CSS @starting-style规则来定义popover刚显示时的初始样式，让浏览器能捕获到从初始状态到popover-open状态的过渡：

[popover] {
  transition: opacity 1s ease;
}

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

/* 定义popover打开瞬间的初始样式 */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
  }
}

这个方法是目前适配原生popover过渡的标准方案，既保留了原生popover的所有行为（比如焦点管理、外部点击关闭），又能实现平滑的过渡效果。

注意：@starting-style目前已被主流现代浏览器支持（Chrome 117+、Firefox 119+、Safari 17.4+），如果需要兼容旧版本浏览器，可以考虑通过JavaScript监听popover的toggle事件，手动控制元素的显隐和过渡，但会增加额外的代码复杂度。

内容的提问来源于stack exchange，提问作者Philipp Gfeller