CodePen Embed - popover css example

<div id="div" popover>[popover]</div>
<button popovertarget="div">toggle</button>
<button popovertarget="div" popovertargetaction="show">show</button>
<button popovertarget="div" popovertargetaction="hide">hide</button>

<button>no effect</button>

/* popover 过渡 */

[popover] {
  padding: 1rem;
  border-radius: 1rem;
  border: solid 2px #ccc;

  transition: opacity 0.7s, transform 0.7s, overlay 0.7s allow-discrete,
    display 0.7s allow-discrete;
  /* 相当于 transition: all 0.7s allow-discrete */
  opacity: 0;
  transform: translateY(-1rem);
  /* 此处隐含 display: none */
}

[popover]:popover-open {
  opacity: 1;
  transform: translateY(0);
  /* 此处隐含 display: block */
}

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

/* ::backdrop 过渡 */

[popover]::backdrop {
  background-color: rgb(0 0 0 / 0);
  transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete,
    background-color 0.7s;
  /* 相当于 transition: all 0.7s allow-discrete */
  /* 此处隐含 display: none */
}

[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 0.1);
  /* 此处隐含 display: block */
}

@starting-style {
  [popover]:popover-open::backdrop {
    background-color: rgb(0 0 0 / 0);
  }
}

This Pen is owned by Ray on CodePen.

See more by @YieldRay on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.