大家好，这对许多人来说似乎很容易，但是我不明白为什么transition当我单击单选按钮以显示隐藏的侧面导航时为什么不起作用。
因此，我仅使用html和css来创建侧面导航，并且发现可以使用单选按钮来显示和隐藏内容。我完成了显示和隐藏部分的工作，但是后来我决定放一个transitionCSS，这样，当我单击显示按钮后，它不会立即显示，但是在过渡时，隐藏/关闭按钮也是如此。
以下是我的代码段
*{
padding: 0;
margin: 0;
}
.nav {
display: none;
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 5s ease-in;
padding-top: 60px;
color: white;
}
#show:checked ~ .nav {
display: block;
z-index: 1;
width: 250px;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
#close:checked ~ .nav {
display: none;
background: rgb( 40, 44, 47 );
opacity: 0.7;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}<header class="header">
<input type="radio" name="side" id="show">show
<nav class="nav">
<ul>
<input type="radio" name="side" id="close">close
<li>Home</li>
<li>About</li>
<li>Task sheets</li>
<li>Poftfolio</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1>Hello</h1>没有过渡，因为您display: none;在隐藏元素时在元素上使用。
当元素的显示值设置为时，该元素在DOM中不存在none。
选中该复选框后，您将nav的宽度设置为250px并将其添加到DOM中。但是它是这样添加的，宽度为250px。display: none从.nav元素中删除并应用过渡。
*{
padding: 0;
margin: 0;
}
.header {
transition: 2s ease-in-out all;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: all 1s ease-in-out;
padding-top: 60px;
color: white;
}
#show:checked ~ .nav {
display: block;
z-index: 1;
width: 250px;
}
#close:checked ~ .nav {
display: none;
background: rgb( 40, 44, 47 );
opacity: 0.7;
}<header class="header">
<input type="radio" name="side" id="show">show
<nav class="nav">
<ul>
<input type="radio" name="side" id="close">close
<li>Home</li>
<li>About</li>
<li>Task sheets</li>
<li>Poftfolio</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1>Hello</h1>请记住，您的HTML无效。input不是的有效子代ul，因此该行为可能不可靠。检查MDN文档。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句