通过 javascript 点击时触发 CSS 动画

Question

我有一个简单的汉堡包图标，我想通过纯 javascript 点击时触发 CSS 动画（请不要使用 jquery）。我通过在汉堡包图标上添加和删除一个类来做到这一点，当我添加该类时，CSS 动画正在发生，但是当我删除该类时，动画没有发生，汉堡包线突然返回而没有动画。基本上我希望动画反转并回到原始位置。

这是代码：

var hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click', function() {
  var hamburgerMenuSpan2 = document.querySelector('.hamburger-second');

  hamburgerMenuSpan2.classList.toggle('hamburger-line-2');
});

.hamburger-menu {
  position: absolute;
  top: 20px;
  right: 20px;
}

.hamburger-line-2 {
  animation-name: animate;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes animate {
  0% {
    width: 40px;
  }
  100% {
    width: 0px;
  }
}

.hamburger-menu span {
  display: block;
  width: 40px;
  height: 2px;
  background: black;
  margin: 10px 0px;
}

<div class="hamburger-menu">
  <span class="hamburger-line-1"></span>
  <span class="hamburger-second"></span>
  <span class="hamburger-line-3"></span>
</div>

基本上我希望汉堡图标线在点击时变为 0px 宽度，然后每当用户再次单击时我希望汉堡图标线变为从 0 开始的原始宽度。

Answer 1

有点难看，因为需要额外的类，但它有效：

var hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click', function() {
  var hamburgerMenuSpan2 = document.querySelector('.hamburger-second');

  if (hamburgerMenuSpan2.classList.contains("animate-out")) {
    hamburgerMenuSpan2.classList.remove("animate-out");
    hamburgerMenuSpan2.classList.add("animate-in");
  } else {
    hamburgerMenuSpan2.classList.add("animate-out");
    hamburgerMenuSpan2.classList.remove("animate-in");
  }

});

.hamburger-menu {
  position: absolute;
  top: 20px;
  right: 20px;
}

.hamburger-line-2 {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.animate-out {
  animation-name: animate-out;
}

.animate-in {
  animation-name: animate-in;
}

@keyframes animate-out {
  0% {
    width: 40px;
  }
  100% {
    width: 0px;
  }
}

@keyframes animate-in {
  0% {
    width: 0px;
  }
  100% {
    width: 40px;
  }
}

.hamburger-menu span {
  display: block;
  width: 40px;
  height: 2px;
  background: black;
  margin: 10px 0px;
}

<div class="hamburger-menu">
  <span class="hamburger-line-1"></span>
  <span class="hamburger-second hamburger-line-2"></span>
  <span class="hamburger-line-3"></span>
</div>