我的侧边栏 CSS 动画遇到问题

Question

我创建了一个带有侧边栏的网页，其中包含指向我网站其他部分的链接。侧边栏是隐藏的（不是真正隐藏的，只是使用 left: -16vw 离开页面），但有一个突出的按钮供访问者看到。我想要的是，当访问者单击按钮时，侧边栏会滑出。这是我的代码的样子：

HMTL：

<div id="sideBar">
    <button id="navButton" type="button">>></button>
    <nav>
      <ul>
        <li><a href="#">Stuff</a></li>
        <li><a href="#">More Stuff</a></li>
        <li><a href="#">Even More Stuff</a></li>
      </ul>
    </nav>
  </div>

CSS：

#sideBar {
  display: flex;
  flex-direction: row-reverse;
  position: fixed;
  height: 84vh;
  min-width: 18vw;
  top: 8vh;
  left: -16vw;
  animation: slide;
  animation-duration: .3s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(16vw);
  }
}

nav {
  background-color: gray;
  width: 100%;
  height: 100%;
}

#navButton {
  min-width:2vw;
  margin-left: -1px;
  background-color: rgb(228, 228, 228);
  border: 2px solid rgb(51, 51, 51);
  border-radius: 0 50px 50px 0;
  font-size: 1.5rem;
  font-weight: bold;
  opacity: .5;
  transition: 
    opacity .3s,
    background-color 0s;
}

#navButton:active {
  background-color: white; 
}

#navButton:active + #sideBar {
  animation-play-state: running;
}

#navButton:hover {
  opacity: 1;
  cursor: pointer;
}

我确实在网上读到过，这可能需要 JavaScript 才能完成。无论如何，我只能使用 CSS 和 HTML 来做到这一点吗？我还没有学习 JavaScript，我只是想坚持只使用 HTML/CSS。在继续前进之前，我会尽力向这两个人学习尽可能多的知识。预先感谢你们的帮助，我真的很感激。另外，如果您对我的代码有任何改进的建议，请告诉我；我想尽可能多地学习。

当我注释掉“动画播放状态”时，动画就可以工作，所以我知道它可以工作。我也尝试过仅添加“活动”伪类，但这不起作用。我也尝试将其添加到“悬停”，但这也不起作用。

Answer 1

复选框有一个小技巧：

• 将“打开”按钮设为标签，并将其与隐藏的复选框相关联
• 使该复选框成为侧边栏的同级，并使用

  +

  或

  ~

根据选中状态更改 css

#sideBar {
  display: flex;
  flex-direction: row-reverse;
  position: fixed;
  height: 84vh;
  min-width: 18vw;
  top: 8vh;
  left: -16vw;
  animation: slide;
  animation-duration: 0.3s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(16vw);
  }
}

nav {
  background-color: gray;
  width: 100%;
  height: 100%;
}

input {
  display: none;
}

#navButton {
  padding-top: 38vh;
  min-width: 2vw;
  margin-left: -1px;
  background-color: rgb(228, 228, 228);
  border: 2px solid rgb(51, 51, 51);
  border-radius: 0 50px 50px 0;
  font-size: 1.5rem;
  font-weight: bold;
  opacity: 0.5;
  transition: opacity 0.3s, background-color 0s;
}

#navButton:active {
  background-color: white;
}

#navButton:active+#sideBar {
  animation-play-state: running;
}

#navButton:hover {
  opacity: 1;
  cursor: pointer;
}

input:checked~#sideBar {
  left: 0;
}

<input type="checkbox" id="toggle" />
<div id="sideBar">
  <label id="navButton" for="toggle">>></label>
  <nav>
    <ul>
      <li><a href="#">Stuff</a></li>
      <li><a href="#">More Stuff</a></li>
      <li><a href="#">Even More Stuff</a></li>
    </ul>
  </nav>
</div>