HTML <dialog> fade-in and fade-out

fading-dialog.css

dialog,
dialog[open]::backdrop {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}

dialog[open].fade-in,
dialog[open].fade-in::backdrop {
  transition-delay: 0s;
}

dialog[open].fade-in,
dialog[open].fade-in::backdrop {
  opacity: 1;
  visibility: visible;
}

dialog::backdrop {
  backdrop-filter: blur(3px);
}

fading-dialog.html

<dialog id="dialog">
  <button type="button" id="close-dialog-button">
    fade out
  </button>
</dialog>

<main>
  <button type="button" id="open-dialog-button">
    fade in
  </button>
</main>

fading-dialog.js

const getDialog = () => document.getElementById('dialog')
const getOpenDialogButton = () => document.getElementById('open-dialog-button')
const getCloseDialogButton = () => document.getElementById('close-dialog-button')

const closeModal = () => {
  const dialog = getDialog()
  dialog.close();
  dialog.removeEventListener('transitionend', closeModal);
}

getCloseDialogButton().addEventListener('click', function() {
  const dialog = getDialog()
  dialog.classList.remove('fade-in');
  dialog.addEventListener('transitionend', closeModal);
});


getOpenDialogButton().addEventListener('click', function() {
  const dialog = getDialog()
  dialog.showModal();
  dialog.classList.add('fade-in');
});