不透明度转换事件无效

Question

我试图在单击某个按钮时显示一个菜单，我尝试用一​​个＆＃34;从侧面滑入（？）＆＃34;过渡，有效。 width属性从0％到100％。我想把它改为0到0的不透明度，这样就破坏了它。

如果我手动将不透明度更改为0或1，我会得到所需的结果，似乎onClick事件不会再触发。

我有以下代码：

HTML

 <!-- Main Navigation Menu -->
 <div id="fullScreenMenu" class="overlay">
     <!-- Menu Content -->
     <div class="overlay-content">
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
     </div>
 </div>

和

<span onclick="openNav()" class="float-left button">                           
    MENU
</span>

CSS

.overlay {    
height: 100%;
width: 100%;
opacity: 0; /* Starting Opacity */
position: fixed;
z-index: 1; 
left: 0;
top: 0;    
background-color: rgb(0,0,0); 
background-color: rgba(0,0,0, 0.9); 
overflow-x: hidden; /* Disable horizontal scroll */
transition: opacity 0.5s;
}

JS

function openNav() {
     document.getElementById("fullScreenMenu").style.opacity = "1.0";
}

function closeNav() {
     document.getElementById("fullScreenMenu").style.opacity = "0.0";
}