全屏菜单覆盖:我如何让它淡入淡出？

<button id="menuButton">显示菜单</button>
<nav id="fullscreenMenu">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</nav>

#fullscreenMenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}

#fullscreenMenu ul {
  list-style: none;
  text-align: center;
  padding-top: 50px;
}

#fullscreenMenu li {
  margin-bottom: 20px;
}

#fullscreenMenu li a {
  color: #000;
  text-decoration: none;
  font-size: 20px;
}

#menuButton {
  margin-top: 50px;
}

var menuButton = document.getElementById('menuButton');
var fullscreenMenu = document.getElementById('fullscreenMenu');

menuButton.addEventListener('click', function() {
  if (fullscreenMenu.style.visibility === 'hidden') {
    fullscreenMenu.style.visibility = 'visible';
    fullscreenMenu.style.opacity = '1';
  } else {
    fullscreenMenu.style.opacity = '0';
    fullscreenMenu.addEventListener('transitionend', function() {
      fullscreenMenu.style.visibility = 'hidden';
    }, {once: true});
  }
});