是否可以在切换关闭时更改转换速度

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>