我的导航栏按钮动画不起作用答案

【问题标题】：My animation for my navbar button is not working我的导航栏按钮动画不起作用
【发布时间】：2021-09-15 08:54:59
【问题描述】：

在这个动画中，当你点击汉堡按钮时，中间的条应该消失，这已经发生了，剩下的两条线没有做任何事情，它们应该旋转 45 度，所以它们变成了一个 x。我尝试更改 Javascript 上块的顺序，但这不起作用。就像我上面说的，中间的那条线可以用，其他两条不行。

到目前为止，这是我的代码：

function toggleNav() {
    document.getElementById("menu").classList.toggle("active"); 
    document.getElementById("menu-button").classList.toggle("open"); 
}

* {
  margin: 0;
  padding: 0;
}

#menu {
  -webkit-transform: translateX(-400px);
          transform: translateX(-400px);
  margin-top: 50px;
  width: 400px;
  height: 100%;
  background: #dcfa71;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#menu.active {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

#menu ul li {
  list-style-type: none;
  color: #425c45;
  font-size: 2.5rem;
  padding: 18px 28px;
}

#menu ul li:hover {
  color: #1dd820;
  cursor: pointer;
}

#menu .menu-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 35px;
  left: 435px;
  z-index: 1;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button {
  margin-top: 50px;
  margin-left: 20px;
  width: 70px;
  height: 14px;
  background: black;
  border-radius: 5px;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button::before, #menu-button::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 14px;
  background: black;
  border-radius: 5px;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button::before {
  -webkit-transform: translateY(-24px);
          transform: translateY(-24px);
}

#menu-button::after {
  -webkit-transform: translateY(24px);
          transform: translateY(24px);
}

#menu-button.open {
  -webkit-transform: translateX(300px);
          transform: translateX(300px);
  background: transparent;
}

#menu-button.open #menu-button::before {
  -webkit-transform: rotate(45deg) translate(35px, -35px);
          transform: rotate(45deg) translate(35px, -35px);
}

#menu-button.open #menu-button::after {
  -webkit-transform: rotate(-45deg) translate(35px, 35px);
          transform: rotate(-45deg) translate(35px, 35px);
}
/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Sliding menu</title>
  </head>
  <body>
    <div class="menu-button" id="menu-button" onclick="toggleNav()">
          
    </div>
    <div id="menu" class="menu" >
    
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
      </ul>
    </div>
    <script src="main.js"></script>
  </body>
</html>

【问题讨论】：

标签： javascript css css-animations css-transitions

【解决方案1】：

将 CSS 中的选择器更改为 #menu-button.open::before 和 #menu-button.open::after。

function toggleNav() {
    document.getElementById("menu").classList.toggle("active"); 
    document.getElementById("menu-button").classList.toggle("open"); 
}

* {
  margin: 0;
  padding: 0;
}

#menu {
  -webkit-transform: translateX(-400px);
          transform: translateX(-400px);
  margin-top: 50px;
  width: 400px;
  height: 100%;
  background: #dcfa71;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#menu.active {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

#menu ul li {
  list-style-type: none;
  color: #425c45;
  font-size: 2.5rem;
  padding: 18px 28px;
}

#menu ul li:hover {
  color: #1dd820;
  cursor: pointer;
}

#menu .menu-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 35px;
  left: 435px;
  z-index: 1;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button {
  margin-top: 50px;
  margin-left: 20px;
  width: 70px;
  height: 14px;
  background: black;
  border-radius: 5px;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button::before, #menu-button::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 14px;
  background: black;
  border-radius: 5px;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button::before {
  -webkit-transform: translateY(-24px);
          transform: translateY(-24px);
}

#menu-button::after {
  -webkit-transform: translateY(24px);
          transform: translateY(24px);
}

#menu-button.open {
  -webkit-transform: translateX(300px);
          transform: translateX(300px);
  background: transparent;
}

#menu-button.open::before {
  -webkit-transform: rotate(45deg) translate(35px, -35px);
          transform: rotate(45deg) translate(35px, -35px);
}

#menu-button.open::after {
  -webkit-transform: rotate(-45deg) translate(35px, 35px);
          transform: rotate(-45deg) translate(35px, 35px);
}
/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Sliding menu</title>
  </head>
  <body>
    <div class="menu-button" id="menu-button" onclick="toggleNav()">
          
    </div>
    <div id="menu" class="menu" >
    
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
      </ul>
    </div>
    <script src="main.js"></script>
  </body>
</html>

【讨论】：