CSS transition animation not working for popover attribute

Question

While testing the new popover attribute, I tried to apply a transition for toggling it. This does not seem to work. Is this by design or is it a bug? The opacity is applied, but the transition is not visible.

[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

Seems to work fine if you use an animation instead, example:

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

@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>

The possibility to animate discrete properties is yet not supported, refer to this guide for more info. In particular:

The ability to animate discrete properties, including animating to and from display: none and animating to and from the top layer are not yet available in browsers. However, they are planned for an upcoming version of Chromium, closely following this release.

With the ability to animate discrete properties, and using :popover-open and @starting-style, you'll be able to set up before-change and after-change styles to enable smooth transitions when opening and closing popovers.

Updated example which uses :popover-open and @starting-style (adapted from the example in the link above, requires the #experimental-web-platform-features flag turned on in Chrome Canary):

/* Animating */
[popover] {
  &:popover-open {
    /*   0. BEFORE-OPEN STATE   */
    /*  initial state for what we're animating *in* from  */
    @starting-style {
      opacity: 0;
    }

    /*   1. OPEN STATE   */
    /*  state when popover is open, BOTH:
        what we're transitioning *in* to 
        and transitioning *out* from */
    opacity: 1;
  }

  /*   2. AFTER-OPEN-IS-CLOSED STATE   */
  /*  initial state for what we're animating *out* to */
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: opacity 0.5s, display 0.5s;
}

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