CSS 过渡动画不适用于 popover 属性

Question

在测试新的

popover

属性时，我尝试应用转换来切换它。这似乎不起作用。这是设计使然还是错误？应用了不透明度，但过渡不可见。

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

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

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

Answer 1

如果您使用

animation

来代替，似乎可以正常工作，例如：

[popover] {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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