为什么 CSS 转换在从函数运行时不起作用？

Question

我有一个问题。所以我想做一个不透明度的过渡，所以我做了一个函数来显示带有此过渡的div，然后设置它的不透明度，但是它不起作用。

我的代码片段：

CSS

#menu {
  background-color: rgba(218,218,218,.9);
  transition: opacity 500ms;
}

JavaScript

function openMenu() {
  document.getElementById("menu").style.display = "block";
  document.getElementById("menu").style.opacity = "1";
}
function returnToDesktop() {
  document.getElementById("menu").style.display = "none";
  document.getElementById("menu").style.opacity = "0";
}

HTML

<button style="float: right;" onclick="returnToDesktop()">
  <img src="images/quit-menu-icon.png">
  <h2>Go back</h2>
</button>
<!--  ...  -->
<button onclick="openMenu()">
  <img src="images/apps-icon.png">
</button>
<h2>Other Apps</h2>
<br>

有谁知道解决办法吗？

Answer 1

对于未来的读者：

@deEr 在评论中提供了答案：

我猜你想把 style.display 从你的函数中去掉。😊