属性 TransformX(0%) 未应用于无序列表

Question

我正在创建这个移动导航栏，它会在我单击菜单按钮时淡入淡出（当我伸出大约 800 像素时会出现此按钮）。默认情况下，菜单有一个 transform: translateX(100%); ，当我单击按钮时，它会应用 class 和样式 .nav-active{ transform: translateX(0); } ，菜单应该出现在屏幕上，但样式并没有出现认出来了。

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

const navSlide = ()=>{
    const burger = document.querySelector('.burger'); 
    const nav = document.querySelector('.nav-links'); 

    burger.addEventListener('click', ()=>{
     nav.classList.toggle('nav-active');
    });
}

navSlide();

@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* font-family: 'PT Serif', serif; */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --mainFont: 'PT Serif', serif;
  --charcoal: #264653ff;
--persian-green: #2a9d8fff;
--orange-yellow-crayola: #e9c46aff;
--sandy-brown: #f4a261ff;
--burnt-sienna: #e76f51ff;
--columbia-blue: #c8ecfaff;

}


header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: var(--mainFont);
  background-color: var(--orange-yellow-crayola) ;
  /* background-color: var(--heat-wave); */
  padding:12px;

}

header#header div#company-logo {
  width: 30%;
  /* margin-left: 5px; */
}

header#header div#company-logo img{
  width: 60%;
}
nav#nav-bar {
  margin-left: 22px;
  display: flex;
  width: 70%;
}
.nav-links{
  display: flex;
  /* background-color: var(--carolina-blue); */
  justify-content: space-around;
  width: 100%;
  align-items: flex-end; 
  margin-left: 44%;
  padding: 12px;
}
 
.nav-links a{ 
  color: var(--alice-blue);
  text-decoration: none;
  letter-spacing: 4px;
  font-size: 1.5vmax ;
  font-family: var(--mainFont);
  margin-right: 3px;
  color: white;
  justify-content: space-around;
  /* margin-right: 55px; */
}
.nav-links li{
  list-style-type: none;
  
}
.nav-links a:hover{
  border-bottom: 3px solid white;
  border-top: 3px solid white;
  padding-bottom: 3px;
 }
  
 .burger {
  display: none;
}
 .burger div{
   width:25px;
   height:3px;
   background-color: white;
   margin: 5px;
 }

 @media  screen and (max-width: 1024px){
   
    .nav-links{
      display: flex;
      /* background-color: var(--carolina-blue); */
      justify-content: space-around;
      width: 100%;
      align-items: flex-end; 
      margin-left: 44%;
      padding: 12px;
    }
     
  
}
@media  screen and (max-width: 768px){
 nav#nav-bar .nav-links {
    /* dis:none; */
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
  width: 100%; 
  background-color: var(--orange-yellow-crayola) ;
  display:flex;flex-direction:column;
  align-items:center;
  transform: translateX(100%); 
  transition: transform 0.5s ease-in;
  }

  nav#nav-bar .nav-links li{
   opacity:0;
  }
 
  body{
    overflow-x: hidden;
  }
  
header#header div#company-logo {
 z-index: 1;
  /* margin-left: 5px; */
}
.burger {
  display:flex;
  flex-direction:column;
  flex: 1;
 
}

.burger div{
  display:flex;
  align-self:  flex-end;
  gap: -10px;
}

 div.line2, div.line3{
  margin-top: .6px;
}

.nav-active{
  transform: translateX(0); 
}


}

    <header id="header">
        <div id="company-logo">
            <img src="https://eldor48.github.io/product-landing-page/img/hamburger.svg" alt="hamburger logo" srcset="">
            <!-- <p>Hamburguer Boost</p> -->
        </div>
        <nav id="nav-bar">
            <ul class="nav-links">
                <li class="nav-link"> <a href="#">Home</a></li>
                <li class="nav-link"> <a href="#">Info</a></li>
                <li class="nav-link"><a href="#">Contact Us</a></li>
            </ul>
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
        </nav>

    </header>

Answer 1

确保将其添加到 body 标签的底部。不要使用切换。请改用 nav.className = "nav-active" 或者您也可以使用 nav.classList = "nav-active"。

Answer 2

了解 CSS 特异性：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

还要学习使用浏览器内置的开发人员工具。它会根据具体情况向您显示应用和未应用的样式。

选择器 nav#nav-bar .nav-links 比选择器 .nav-active 具有更高的特异性，因此其样式将以更高的优先级应用。

为避免这种情况，当您有一个 class 应该覆盖另一个规则时，请确保覆盖规则具有相同的选择器和修饰符。在这种情况下，它将是 nav#nav-bar .nav-links.nav-active.

还有一个提示：不要过度指定选择器。也不要使用 ID 来应用样式。 ID 具有最高的特异性，因此更难覆盖它们。在您的情况下，而不是 nav#nav-bar .nav-links，只需 .nav-links 就足够了，然后活动选择器将是 .nav-links.nav-active.

属性 TransformX(0%) 未应用于无序列表

Property TransformX(0%) is not being applied to the unordered list

html

javascript

css

css-animations