jquery - 我怎样才能让我的汉堡包动画反转？

Question

我无法让我的动画顺利运行。

我创建了一个带有三个 div 的汉堡图标，如下所示:

<div class="container">
<div class="burger-contain">
    <div id="line-1" class="line"></div>
    <div id="line-2" class="line"></div>
    <div id="line-3" class="line"></div>
</div>
</div>

我有三个不同的关键帧，每行一个。

.line:first-child {
   animation-name: firstChild;
   transform-origin: 30px 25px;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   margin: 10px;
}

然后是关键帧:

@keyframes firstChild {
0% {transform: translateY(0);}
50% {transform: translateY(10px);}
100% {transform: rotate(-45deg);}
}

这三者的动画略有不同。 child 二只消失了，而 child 三上升而不是下降。

为了实现点击功能，我使用 jquery 添加/删除这样的类:

$(document).ready(function(){

var line = $(".line");
var burger = $(".burger-contain")
var toggled = false;

burger.click(function(){
   triggerAnimation();
});

function triggerAnimation(){
   if (toggled === false){
   line.removeClass("reverse");
   line.addClass("animate");
   toggled = true;
} else {

   line.removeClass("animate");
   line.addClass("reverse");
   toggled = false; 
}

}


});

然后我的反转动画计划是使用 CSS animation-direction: reverse; 像这样:

.line:first-child.reverse {
animation-name: firstChild;
transform-origin: 30px 25px;
animation-duration: 0.5s;
animation-fill-mode: forwards;
margin: 10px;
animation-direction: reverse;
}

同样在所有三行上。

但是，问题 是第一个动画运行正常。第二次它停止一起动画。从 Burger 状态到 Cross 状态之间没有转换。来回都一样，动画只能用一次。

是我的逻辑错了，还是我误解了反向动画的使用？

Answer 1

您对逆向的理解并不完全正确。

The animation plays backwards each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and timing functions are also reversed. For example, an ease-in timing function becomes ease-out.^ref

在您的情况下，动画已经结束，因此添加 reverse 不会再次触发动画，它只会切换开始和结束状态。

这是一个简化的例子。在悬停时你会看到动画会跳跃并且不会平滑地改变方向，因为我们反转了整个动画并且我们没有将元素从它所在的位置移回。这就像照镜子:

.box {
  width:50px;
  height:50px;
  background:red;
  animation:change 5s linear forwards;
}

@keyframes change {
  from {transform:translateX(0)}
  to {transform:translateX(300px)}
}

body:hover .box{
   animation-direction:reverse;
}

<div class="box">

</div>

动画完成后，您可以清楚地注意到悬停时我们如何切换第一个和最后一个状态。

---

这是一种更简单的方法，使用过渡而不是动画，您需要的代码更少。

我使用了悬停，但您可以轻松地替换为您添加/删除的类

.menu {
  height:50px;
  width:60px;
  position:relative;
  margin:50px;
  background:
    linear-gradient(#000,#000) center/100% 10px no-repeat;
  transition:all 0s 0.5s;
}
.menu:before,
.menu:after{
  content:"";
  position:absolute;
  left:0;
  height:10px;
  width:100%;
  background:#000;
  transition:0.5s 0.5s top,0.5s 0.5s bottom,0.5s transform;
}
.menu:before {
  top:0;
}
.menu:after {
  bottom:0;
}

.menu:hover {
  background-size:0px 0px;
}

.menu:hover:before {
  top:calc(50% - 5px);
  transform:rotate(45deg);
  transition:0.5s top,0.5s 0.5s transform;
}

.menu:hover:after {
  bottom:calc(50% - 5px);
  transform:rotate(-45deg);
  transition:0.5s bottom,0.5s 0.5s transform;
}

<div class="menu">
  
</div>