77. ポップオーバーとダイアログのアニメーション

<button class="button" popovertarget="mypopover">ポップオーバーを開く</button>
<button class="button" onclick="mydialog.showModal()">ダイアログを開く</button>

<div id="mypopover" class="popover" popover>ポップオーバーの内容</div>

<dialog id="mydialog" class="dialog">
  <button onclick="mydialog.close()">閉じる</button>
</dialog>

.popover, .dialog {
  &, &::backdrop {
    opacity: 0;  /* [1] */
    transition-property: opacity, overlay, display;  /* [2] */
    transition-duration: 0.6s;
    transition-behavior: normal, allow-discrete, allow-discrete;  /* [2] */
  }
  
  &::backdrop {
    background-color: rgba(0 0 0 / 40%);  /* [3] */
  }
}

.popover:popover-open, .dialog:modal {
  &, &::backdrop {
    opacity: 1;  /* [4] */
  }

  @starting-style {
    &, &::backdrop {
      opacity: 0;  /* [5] */
    }
  }
}