为啥我不能使用复选框动画汉堡菜单栏更改为 X？
Posted
技术标签:
【中文标题】为啥我不能使用复选框动画汉堡菜单栏更改为 X？【英文标题】：Why can't I animate hamburger menu bars change to X using checkbox?为什么我不能使用复选框动画汉堡菜单栏更改为 X？ 【发布时间】：2020-06-10 12:59:57 【问题描述】：我试图将菜单按钮留到x中，当检查复选框切换时，与菜单栏上的鼠标相同。但是，似乎只有 bar1 可以动画并形成 X 形状，bar2 和 bar3 回到原来的位置。谁能帮帮我？
#toggle
position: absolute;
.bar1
width: 2rem;
height: 3px;
top: 30%;
position: absolute;
background-color: #0AF;
transition: ease-in-out 500ms;
.bar2
width: 2rem;
height: 3px;
top: 50%;
transform: translateY(-50%);
position: absolute;
background-color: #0AF;
transition: ease-in-out 200ms;
.bar3
width: 2rem;
height: 3px;
bottom: 30%;
position: absolute;
background-color: #0AF;
transition: ease-in-out 500ms;
.btn-menu:hover .bar1,
#toggle:checked+.bar1
transform: rotate(45deg);
top: 45%;
.btn-menu:hover .bar2,
#toggle:checked+.bar2
transform: translateX(50px);
opacity: 0;
top: 45%;
.btn-menu:hover .bar3,
#toggle:checked+.bar3
transform: rotate(-45deg);
bottom: 45%;
<body>
<div class="container">
<label class="btn-menu" for="toggle">
<input type="checkbox" id="toggle">
<div class="bar1"> </div>
<div class="bar2"> </div>
<div class="bar3"> </div>
</label>
</div>
</body>【问题讨论】：
【参考方案1】：用~代替+
.btn-menu:hover .bar1,
#toggle:checked~.bar1
transform: rotate(45deg);
top: 45%;
.btn-menu:hover .bar2,
#toggle:checked~.bar2
transform: translateX(50px);
opacity: 0;
top: 45%;
.btn-menu:hover .bar3,
#toggle:checked~.bar3
transform: rotate(-45deg);
bottom: 45%;
【讨论】：
【参考方案2】：从这 3 个类中删除“+”。
.btn-menu:hover .bar1,
#toggle:checked .bar1
transform: rotate(45deg);
top: 45%;
.btn-menu:hover .bar2,
#toggle:checked .bar2
transform: translateX(50px);
opacity: 0;
top: 45%;
.btn-menu:hover .bar3,
#toggle:checked .bar3
transform: rotate(-45deg);
bottom: 45%;
【讨论】：
【参考方案3】：您必须将 '+' 替换为 '~' 并在选择器之间添加空格才能使其正常工作。
#toggle:checked ~ .bar1
transform: rotate(45deg);
top: 45%;
#toggle:checked ~ .bar2
transform: translateX(50px);
opacity: 0;
top: 45%;
#toggle:checked ~ .bar3
transform: rotate(-45deg);
bottom: 45%;
另外，为了使您的代码更清晰，我建议您将具有相同属性的选择器分组，如下所示：
.bar1,.bar2,.bar3
position: absolute;
width: 2rem;
height: 3px;
background-color: #0AF;
.bar1
top: 30%;
transition: ease-in-out 500ms;
.bar2
top: 50%;
transform: translateY(-50%);
transition: ease-in-out 200ms;
.bar3
bottom: 30%;
transition: ease-in-out 500ms;
【讨论】：
以上是关于为啥我不能使用复选框动画汉堡菜单栏更改为 X？的主要内容，如果未能解决你的问题，请参考以下文章
为啥我的 React + Tailwind 汉堡菜单没有关闭？