使用 Click 事件反转 CSS 动画答案

【问题标题】：Reverse a CSS Animation with a Click Event使用 Click 事件反转 CSS 动画
【发布时间】：2019-12-13 19:18:56
【问题描述】：

我刚刚创建了一个菜单，其中包含从右侧滑入的 CSS 动画。我可以关闭它，但菜单只是消失而不是很好地流出。

我也尝试了一些方法，例如删除 CSS，但没有奏效。可以发现被移除的 CSS 被注释掉了。

这是我编写的代码：

const container = document.querySelector(".container"),
      menuIcon = document.querySelector(".menu_icon");

menuIcon.addEventListener("click", () => {
  container.querySelector(".menu").classList.toggle("open"),
  container.querySelector(".menu_icon").classList.toggle("open"),
  container.querySelectorAll(".menu_line").forEach(e => e.classList.toggle("open"))
});

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

.menu {
  background-color: aliceblue;
  height: 100vh;
  width: 100vw;
  display: grid;
  align-content: center;
  /* align-content: space-evenly; */
  text-align: center;
  z-index: 0;
  /* animation-iteration-count: infinite; */
  /* visibility: hidden; */
  margin-left: -100vw;
}

.menu.open {
  animation: menuFrame 2s ease-in-out;
  animation-fill-mode: forwards;
  /* animation-direction: alternate; */
}

.menu.closed {
  animation: menuFrame 2s ease-in-out;
}

h2 {
  color: black;
  font-size: 1.6rem;
  letter-spacing: .05rem;
}

@keyframes menuFrame {
  /* from {opacity: 0; margin-left: -100vw;} */
  from {
    opacity: 0;
    margin-left: 100vw;
  }
  75% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
    margin-left: 0vw;
    visibility: visible;
  }
}

hr {
  transform: rotate(100deg);
  margin-left: 25vw;
}

.menu_icon {
  position: absolute;
  /* border: 1px solid coral; */
  top: 20px;
  right: 20px;
  height: 40px;
  width: 40px;
  display: grid;
  align-content: space-evenly;
}

.menu_icon.open {
  align-content: center;
}

.menu_line {
  height: 1px;
  /* width: 100%; */
  background: black;
  /* margin: 11px auto; */
  z-index: 3;
  /* border: 1px solid black; */
}

.menu_line:nth-child(1).open {
  transform: rotate(45deg);
  /* align-self: center; */
}

.menu_line:nth-child(2).open {
  transform: rotate(-45deg);
  /* align-self: center; */
}

<div class="container">
  <div class="menu_icon">
    <div class="menu_line"></div>
    <div class="menu_line"></div>
  </div>
  <div class="menu">
    <h2>Home</h2>
    <h2>About</h2>
    <h2>Contact</h2>
    <hr />
  </div>
</div>

【问题讨论】：

请把所有的代码都放在你的问题中，而不是放在小提琴里。
当公开课被移除时，你的菜单不再附有任何动画，所以一切都会立即重置为默认值
@zero298 很抱歉，我希望在这里没有太久
@Huangism 好吧，我将如何让动画不是从头开始，而是等到按钮被点击
@EdgarJohn 对动画不太熟悉，但我认为这个想法是将动画放在菜单上并使用打开/关闭类来控制其行为。或者有 2 个动画，一个用于打开，一个用于关闭，并通过 2 个类应用您的 2 个动画

标签： javascript html css css-animations

【解决方案1】：

我通过在菜单div 上引入一个initial 类来实现此功能，该类在单击时会被删除，并向.menu:not(.initial) 添加第二个动画。见下sn-p：

const container = document.querySelector(".container"),
      menuIcon = document.querySelector(".menu_icon");

menuIcon.addEventListener("click", () => {
  container.querySelector(".menu").classList.remove("initial"),
  container.querySelector(".menu").classList.toggle("open"),
  container.querySelector(".menu_icon").classList.toggle("open"),
  container.querySelectorAll(".menu_line").forEach(e => e.classList.toggle("open"))
});

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

.menu {
  background-color: aliceblue;
  height: 100vh;
  width: 100vw;
  display: grid;
  align-content: center;
  opacity: 0;
  /* align-content: space-evenly; */
  text-align: center;
  z-index: 0;
  /* animation-iteration-count: infinite; */
  /* visibility: hidden; */
  margin-left: 100vw;
}

.menu:not(.initial) {
  animation: menuFrame2;
  animation-duration: 2s;
  animation-direction: reverse;
  animation-fill-mode: both;
}

.menu.open {
  animation: menuFrame;
  animation-duration: 2s;
  animation-fill-mode: both;
}

h2 {
  color: black;
  font-size: 1.6rem;
  letter-spacing: .05rem;
}

@keyframes menuFrame {
  /* from {opacity: 0; margin-left: -100vw;} */
  from {
    opacity: 0;
    margin-left: 100vw;
  }
  75% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
    margin-left: 0vw;
    visibility: visible;
  }
}

@keyframes menuFrame2 {
  /* from {opacity: 0; margin-left: -100vw;} */
  from {
    opacity: 0;
    margin-left: 100vw;
  }
  75% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
    margin-left: 0vw;
    visibility: visible;
  }
}

hr {
  transform: rotate(100deg);
  margin-left: 25vw;
}

.menu_icon {
  position: absolute;
  /* border: 1px solid coral; */
  top: 20px;
  right: 20px;
  height: 40px;
  width: 40px;
  display: grid;
  align-content: space-evenly;
}

.menu_icon.open {
  align-content: center;
}

.menu_line {
  height: 1px;
  /* width: 100%; */
  background: black;
  /* margin: 11px auto; */
  z-index: 3;
  /* border: 1px solid black; */
}

.menu_line:nth-child(1).open {
  transform: rotate(45deg);
  /* align-self: center; */
}

.menu_line:nth-child(2).open {
  transform: rotate(-45deg);
  /* align-self: center; */
}

<div class="container">
  <div class="menu_icon">
    <div class="menu_line"></div>
    <div class="menu_line"></div>
  </div>
  <div class="menu initial">
    <h2>Home</h2>
    <h2>About</h2>
    <h2>Contact</h2>
    <hr />
  </div>
</div>

【讨论】：