css - 我可以通过 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... */
}

Also, take the good advice given by skobaljic in the question's comments about using JS to just add/remove classes for this kind of interaction.