このところ、数回にわたって
「dialogタグとbackdrop擬似要素を使った、モーダルの作り方」に関する記事を書いてきました。

dialog要素を使ってモーダルウインドウを作成する方法
dialog要素を使ったモーダル内から、チェックボックス等の選択値を受け取る方法

今回は、上記の記事内では触れていなかった、
モーダルを表示する際に「ふわっ」とエフェクトをつけてフェードインさせる方法について、書いていきたいと思います。

まずは結論から。次のようなコードで実現できます

dialog要素を使ったモーダルウインドウを、「ふわっ」とフェードインさせる方法は、
具体的には、次のように書きます。
まずはコードをhtml, JS, cssの順に列挙します。

[html]

<div>
  <button id="buttonOpen" class="button-open">dialogタグを使ったモーダルを開く</button>
</div>
<dialog class="container-modal" id="modalDialog">
  <div class="wrapper-modal">
    <h2>シンプルなモーダル</h2>
    <p>
      このダイアログ（モーダルウインドウ）は、dialogタグで作成されています。
      dialogタグを使うことで、検索エンジンにも
      この要素がダイアログ（モーダルウインドウ）だよ、
      ということを明示できるのでは、と期待しています。
    </p>
    <button id="buttonClose" type="reset" class="button-close">モーダルを閉じる</v-btn>
  </div>
</dialog>

↑dialog要素を使った、モーダルのhtmlの基本形です。

[JavaScript]

<script>
const myDialog = document.getElementById('modalDialog');
const myButtonOpen = document.getElementById('buttonOpen');
const myButtonClose = document.getElementById('buttonClose');
myButtonOpen.addEventListener('click', () => {
  myDialog.showModal();
  myDialog.classList.add('is-animation');
});
myButtonClose.addEventListener('click', () => {
  myDialog.close('閉じた時に渡すテキスト(String)を指定できます');
});
</script>

↑dialog要素を使った、モーダルを開閉するためのJavaScriptの基本形です。