使用CSS打開和關閉可以獲得雙向過渡速度嗎？

Question

我有一個全屏覆蓋菜單。

.overlay { 
    height: 0%; 
    width: 100%; 
    position: fixed; 
    z-index: 70; 
    top: 0; 
    right: 0; 
    background-color:#415566; 
    overflow-y: hidden; 
    transition: 2.0s; 
} 

<div id="menuActive"><a href="javascript:void(0)" onclick="openNav()">&#9776;</a></div> 

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 

我已經JS調用它來打開和關閉：

 function openNav() { 
     document.getElementById("navBar").style.height = "100%"; 
    } 

    function closeNav() { 
     document.getElementById("navBar").style.height = "0%"; 
    } 

是否有可能有openNav()和closeNav()不同的過渡時間？目前，我只能控制兩者。

Answer 1

您可以添加一個額外的類你.overlay修改過渡：

function openNav() { 
    var navBar = document.getElementById("navBar"); 
    navBar.style.height = "100%"; 
    setTimeout(function(){ 
     navBar.classList.add("opened"); 
    }, 2000) 
} 

function closeNav() { 
    var navBar = document.getElementById("navBar"); 
    navBar.style.height = "0%"; 
    setTimeout(function(){ 
     navBar.classList.remove("opened"); 
    }, 300) 
} 

和這個類的CSS可能是：

.opened { 
    transition: height 300ms; /* The duration you want... */ 
} 

另外，還要給予好的建議通過skobaljic在問題的評論關於使用JS來添加/刪除這類交互的類。

Answer 2

我們走吧。

function openNav() { 
$("#navBar").show(1000); 
} 

function closeNav() { 
$("#navBar").hide(); 
}