如何让我的汉堡动画反转? [英] How can I let my hamburger animation reverse?

问题描述

我无法使动画流畅地工作.

I can't get my animation to work smoothly.

我正在创建一个具有三个div的汉堡图标，如下所示:

I've creating a burger icon, with three divs, like this:

<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>

对于每一行，我都有三个不同的关键帧.

I've got three different keyframes, for each line one.

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

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

All three have slightly different animation. Child two only disappears, while child three goes up instead of down.

要做点击功能，我使用jquery添加/删除这样的类:

To do the click function, I use jquery to add / remove classes like this:

$(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;:

Then my plan to reverse the animation was to use the CSS animation-direction: reverse; like this:

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

再次在所有三行中显示.

Again on all three lines.

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

However, the problem is that while the first animation goes fine. The second time around it stops animating all together. There is no transition between the states of the Burger to Cross. Both in back and forth, like the animation can only be used once.

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

Is my logic wrong, or am I misunderstanding the use of the reverse animation?

推荐答案

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

Your understanding of reverse isn't completely true.

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

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不会再次触发动画，它只会切换开始和结束状态.

In your case, the animation already ended so adding reverse will not trigger the animation again, it will simply switch the start and end state.

这是一个简化的示例.悬停时，您会看到动画将跳跃并且不能平滑地改变方向，因为我们反转了整个动画，并且我们没有将元素从原处移回.就像看着镜子一样:

Here is a simplified example. On hover you will see that the animation will jump and not change direction smoothly because we reverse the whole animation and we don't move back the element from where it is. It's like looking at a mirror:

.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>

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

When the animation is done, you can clearly notice how on hover we switch first and last state.

这是使用过渡而不是动画的一种更简单的方法，在这种情况下，您将需要更少的代码.

Here is an easier way to do this using transition instead of animation where you will need less of code.

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

.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>

这篇关于如何让我的汉堡动画反转?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！