CSS转换不起作用-使用单选按钮作为显示/隐藏

Question

大家好，这对很多人来说可能很容易，但我不明白为什么当我单击单选按钮显示隐藏的侧导航时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>

Answer 1

没有转换，因为在元素隐藏时对其使用display: none;。

当元素的显示值设置为none时，该元素不存在于DOM中。

选中该复选框后，将nav的宽度设置为250px，并将其添加到DOM中。但它是这样添加的，宽度为250px。从.nav元素中删除display: none，然后应用转换。

*{
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文档。

Answer 2

它实际上不起作用，因为您使用的是不允许设置动画的display属性。而不是这样做，你可以真正创建一些不透明度，转换等

此外，为了防止数据库单击，可以使用pointer-events。以下是它的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

我为你创建了一支小代码笔，让你真正了解发生了什么。https://codepen.io/snoh666/pen/VwKrbeR