时间戳

首页 > 解决方案 > 通过javascript在点击时触发CSS动画

javascript - 通过javascript在点击时触发CSS动画

问题描述

我有一个简单的汉堡包图标，我想通过纯 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 开始变为原始宽度。

标签： javascripthtmlcsscss-animations

解决方案

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

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>

推荐阅读