我可以通过 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 添加一个额外的 class 来修改过渡：

 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)
 }

和这个 class 的 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.

Answer 2

我们开始了。

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

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

我可以通过 CSS 获得打开和关闭的双向转换速度吗？

Can I get a two-way transition speed with CSS for open and close?

css

transition