可以在关闭时更改转换速度吗？

Question

我有一个带有以下CSS的下拉菜单：

transition: height 2s;

单击菜单/汉堡包图标时，下拉菜单将打开，过渡效果非常好。但是，如果再次单击菜单/汉堡包图标以关闭下拉菜单（切换关闭），我希望转换是即时的0s。是否可以仅使用CSS（而不是复杂的动画）来更改关闭速度？

<input type="checkbox" id="toggle">
<label for="toggle">Menu</label>
<nav>
    <ul>
        <li><a href="work.html">Work</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>   
</nav>





#toggle {
    display: none;
    }

#toggle ~ label {
    display: inline-block;
    cursor: pointer;
    float:right;
    font-size:2.1rem;
    line-height:7.1rem;
    }

nav {
    height:0;
    position:absolute;
    background-color:rgb(0,171,160);
    top:7.2rem;
    left:0;
    right:0;
    z-index:102;
    text-align:center;
    font-size:4.8rem;
    line-height:1.75em;
    transition: height 2s;
    overflow:hidden;
    }

#toggle:checked ~ nav {
    height: 100%;
    }

Answer 1

您需要定义两个过渡，如下所示：

#toggle {
  display: none;
}

#toggle~label {
  display: inline-block;
  cursor: pointer;
  float: right;
  font-size: 2.1rem;
  line-height: 7.1rem;
}

nav {
  height: 0;
  position: absolute;
  background-color: rgb(0, 171, 160);
  top: 7.2rem;
  left: 0;
  right: 0;
  z-index: 102;
  text-align: center;
  font-size: 4.8rem;
  line-height: 1.75em;
  transition: height 0s; /* this one */
  overflow: hidden;
}

#toggle:checked~nav {
  height: 100%;
  transition: height 2s; /* this one */
}

<input type="checkbox" id="toggle">
<label for="toggle">Menu</label>
<nav>
  <ul>
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>