为什么没有应用我的菜单转换？答案

【问题标题】：Why isn't my menu transition being applied?为什么没有应用我的菜单转换？
【发布时间】：2022-02-04 00:35:41
【问题描述】：

我正在尝试创建导航栏但动画不起作用，如您所见，我已将 position: fixed; 和 right: -100%; 放入 .nav-links 以便它可以隐藏而不是在右侧创建空白和#nav-btn:checked~.nav-links { right: 0; width: 100% !important; } 当我点击复选框时，它不显示动画并且没有任何动画出现，这是我的问题。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

nav {
  background: black;
  width: 100% !important;
  color: white;
  height: 76px;
  line-height: 76px;
  padding-right: 10px;
  font-size: 20pt !important;
}

.nav-links a {
  font-size: 20px;
  text-decoration: none;
}

#nav-btn,
label {
  display: none;
}

@media(min-width: 600px) {
  label {}
  .nav-links a {
    color: white;
  }
  .nav-links {
    float: right;
    justify-content: space-between;
  }
  .nav-links a:hover {
    background-color: white;
    color: black;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    border-radius: 5px;
    padding-right: 2.5px;
    padding-left: 2.5px;
  }
  .title,
  .nav-links {
    display: inline;
  }
}

@media(max-width: 599px) {
  .nav-links {
    background-color: black;
  }
  label {
    display: inline;
    float: right;
    padding-right: 20px;
  }
  .extra {
    display: none;
  }
  .nav-links {
    text-align: center;
    display: block;
  }
  .nav-links a {
    display: block;
    transition: .9s;
  }
  nav {
    padding-right: 0px;
  }
  .nav-links a:hover,
  .active {
    background: #ff000a;
    color: white;
  }
  a {
    text-decoration: none;
    color: white;
  }
  .nav-links {
    position: fixed;
    right: -100%;
  }
  #nav-btn:checked~.nav-links {
    right: 0;
    width: 100% !important;
  }
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav>
    &#10240;<span class="title">Nav</span>
    <label for="nav-btn"><i class="fas fa-bars"></i></label>
    <input type="checkbox" name="" id="nav-btn">
    <div class="nav-links">
      <a href="#" class="active">Home</a>
      <a href="css.html">About</a>
      <a href="css.html">Contact Us</a>
      <a href="css.html">Feedback</a>
    </div>
  </nav>
</body>

【问题讨论】：

在您的 css 中，我没有看到 div 导航链接的任何动画
听起来你的意思是transition，而不是动画。 CSS 有所不同。

标签： html css css-transitions

【解决方案1】：

如果我理解正确，您需要将过渡放在导航链接容器上，而不是链接上。这就是打开/关闭发生的地方。

我还将您的宽度规则移动到所有状态的容器中，而不仅仅是显示时。这修复了关闭过渡。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

nav {
  background: black;
  width: 100% !important;
  color: white;
  height: 76px;
  line-height: 76px;
  padding-right: 10px;
  font-size: 20pt !important;
}

.nav-links a {
  font-size: 20px;
  text-decoration: none;
}

#nav-btn,
label {
  display: none;
}

@media(max-width: 9599px) {
  .nav-links {
    background-color: black;
    transition: .9s;
    text-align: center;
    display: block;
    width: 100%;
  }
  label {
    display: inline;
    float: right;
    padding-right: 20px;
  }
  .extra {
    display: none;
  }
  .nav-links a {
    display: block;
  }
  nav {
    padding-right: 0px;
  }
  .nav-links a:hover,
  .active {
    background: #ff000a;
    color: white;
  }
  a {
    text-decoration: none;
    color: white;
  }
  .nav-links {
    position: fixed;
    right: -100%;
  }
  #nav-btn:checked~.nav-links {
    right: 0;
  }
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav>
    &#10240;<span class="title">Nav</span>
    <label for="nav-btn"><i class="fas fa-bars"></i></label>
    <input type="checkbox" name="" id="nav-btn">

    <div class="nav-links">
      <a href="#" class="active">Home</a>
      <a href="css.html">About</a>
      <a href="css.html">Contact Us</a>
      <a href="css.html">Feedback</a>
    </div>
  </nav>
</body>

【讨论】：