如何使用 .toggleClass 播放在 Javascript 中切换的 class 的完整动画？

Question

我正在制作一个导航栏汉堡菜单动画（当您单击它时它会变成一个 x 然后一旦您再次单击又回到汉堡菜单）并且我无法让动画正常播放。它在汉堡包和 x 之间卡住，并且没有播放适当的持续时间。我不确定为什么这样做。我在 css 中设置动画应该播放 0.5 秒。

<a onClick = {onClick}>
  <span className = 'navTrigger inactive'>
    <i></i>
    <i ></i>
  </span>
</a>

.navTrigger {
    cursor: pointer;
    display: block;
    width: 20px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 15px;
  }
  .navTrigger i {
      background: white;
      content: '';
      display: block;
      width:100%;
      height: 1px;
  }
  
  .navTrigger.inactive i:nth-child(1){
    transform: translateY(7px);
    animation: x_1 0.5s backwards ease-in-out;
    
  }
  .navTrigger.inactive i:nth-child(2){
    transform: translateY(-7px);
    animation: x_2 0.5s backwards ease-in-out;
  }

  .navTrigger.active i:nth-child(1) {
    animation: x_1 0.5s forwards ease-in-out;
    
  }

  .navTrigger.active i:nth-child(2) {
    animation: x_2 0.5s forwards ease-in-out;
  }


  @keyframes x_1 {
    0%{
      transform: translateY(0px) rotate(0deg);
    }
    50%{
      transform: translateY(11px) rotate(0deg);
    }
    100%{
      transform: translateY(11px) rotate(45deg);
    }
  }
  @keyframes x_2 {
    0%{
      transform: translateY(0px) rotate(0deg);
    }
    50%{
      transform: translateY(-11px) rotate(0deg);
    }
    100%{
      transform: translateY(-11px) rotate(-45deg);
    }
  }

function onClick(){
  var elem = document.getElementsByClassName('navTrigger')[0];
  elem.classList.toggle('inactive');
  elem.classList.toggle('active');
}

Answer 1

可能使用 2 种切换方法造成了混淆。不要使用 2 classes（'active' 和 'inactive'），尝试在 onClick 时添加 'active' class。默认状态只是 'navTrigger' class:

  <a onClick = {onClick}>
     <span className = 'navTrigger'>
       <i></i>
       <i ></i>
     </span>
  </a>

如果它不能如您所愿，请尝试使用 add() 和 remove() 方法而不是 toggle() 和 'if' 条件检查是否 'active' class存在...类似这样的东西：

function onClick(){
   var elem = document.getElementsByClassName('navTrigger')[0];
   var target = elem.classList;
   if(!(target.contains('active'))){
          target.add('inactive');
     } else if (target.contains('active')){
          target.remove('active')
     }
 }

如有必要，尝试在切换 'active' class.

时使用 setTimeout(function(){....},....)

Answer 2

我使用简单的 transform 来制作这个动画。请检查以下代码段。

function onClick(){
  var elem = document.getElementsByClassName('navTrigger')[0];
  elem.classList.toggle('active');
}

a {
  background-color: #000;
  color: #fff;
  display: block;
  height: 200px;
}

.navTrigger {
  cursor: pointer;
  display: block;
  width: 20px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 15px;
}
.navTrigger i {
  background: white;
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  transition: all 0.3s ease;
}

.navTrigger i:nth-child(1) {
  transform: translate(0, 10px);
}

.navTrigger.active i:nth-child(1) {
  transform: rotate(45deg) translate(15px, 15px);
}

.navTrigger.active i:nth-child(2) {
  transform: rotate(-45deg) translate(0px, 0px);
}

<a onclick="onClick()">
  <span class='navTrigger inactive'>
    <i></i>
    <i ></i>
  </span>
</a>

如何使用 .toggleClass 播放在 Javascript 中切换的 class 的完整动画？

How can I play the full animation of a class that was toggled in Javascript using .toggleClass?

html

javascript

css

css-animations