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);}
}

这三个动画的动画略有不同。第二个孩子只会消失，而第三个孩子会上升而不是下降。

要做点击功能，我使用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;
}

再次在所有三行中显示。

但是，问题是，第一个动画效果很好。围绕它的第二次停止一起动画。汉堡州到克罗斯州之间没有过渡。就像动画一样，前后都只能使用一次。

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

Answer 1

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

动画在每个循环中向后播放。换句话说，每次动画循环时，动画将重置为结束状态并重新开始。动画步骤向后执行，计时功能也相反。例如，缓入计时功能变为缓入。^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>

Answer 2

正在工作的小提琴：https://jsfiddle.net/upnhcw69/38/

要解决这个问题，我们需要有2个动画，然后将它们相互替换，然后正确地进行三角网格处理。

在第一次单击后触发firstChild2动画之后，触发第二次单击firstChild2动画。我们正在使用2个具有不同动画的类。

.line{
   height: 10px;
   width: 100px;
   margin: 10px;
   background-color:red;
}

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

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

.animate {
   animation-name: firstChild;
   transform-origin: 30px 25px;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
}

.reverse {
    animation-name: firstChild2;
   transform-origin: 30px 25px;
   animation-duration: 0.5s;
}

如何让我的汉堡动画反转？

2 个答案: