CSS:菜单图标动画

Question

为什么这段代码不能完全为我工作?当我在浏览器上按下它时没有动画或效果。

这是一个HTML片段:

<!-- Menu Bars -->
<div class="menu-bars" id="menu-bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>

CSS代码片段:

.menu-bars {
position: fixed;
top: 1rem;
right: 2rem;
display: inline-block;
cursor: pointer;
z-index: 11;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 2px;
background-color: #fff;
margin: 8px 0;
transition: 0.4s;
}
.change .bar1 {
transform: rotate(-45deg) translate(-7px, 8px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: rotate(45deg) translate(-6px, -8px);
}

JavaScript代码:

const menuBars = document.getElementsById("menu-bars");
function toggleNav() {
menuBars.classList.toggle("change");    
}
menuBars.addEventListener("click", toggleNav);

Answer 1

它是getElementByIdgetElementsById,就像

const menuBars = document.getElementById("menu-bars");