汉堡菜单动画

Question

我正在制作一个自定义的汉堡菜单动画，当点击汉堡菜单时，汉堡菜单会变成两种形状：一个朝右的三角形和一个位于右侧的人字形。

不过，我在平滑动画方面仍有一些问题；我正在使用边框颜色来完成我想要的，但是双击时（='反向'动画）不如开始动画那么流畅。

我正在开发 Codepen，因此您可以在此处查看代码：Codepen example

HTML 非常基础：

<div class="button">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

(S)CSS：

body {
  background-color: #252626;
}
div {
  width: 200px;
  margin: 100px;
  div {
    height: 50px;
    margin: 30px 0;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    transition: all .3s ease-in-out;
  }
}
.one, .three {
  background-color: #DFBA68;
  height: 12px;
}

.one-clicked, .three-clicked {
  position: relative;
  left: 50px;
  border-radius: 12px;
}

.one-clicked {
  transform: rotate(33deg) scale(.93, 1);
  top: 90px;
}

.two {
  width: 0;
  height: 0;
    border-top: 25px solid #F7F4EA;
    border-left: 200px solid #F7F4EA;
    border-bottom: 25px solid #F7F4EA;
  transition: all .3s ease-in-out, border-color .1ms ease-in-out .2s;
}

.two-clicked{
  width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 150px solid #F7F4EA;
    border-bottom: 100px solid transparent;
  transition: all .3s ease-in-out, border-color .1ms ease-in-out;
}

.three-clicked{
  transform: rotate(-33deg) scale(.93, 1);
  top: -87px;
}

这里的任何人都可以帮我平滑这个完整的动画吗？

Answer 1

汉堡菜单图标动画让我很开心。我完全用 svg 重构了它，并为动画使用了 snap.svg 库。这是输出的 gif：

animated burger icon 的 codepen 演示

注意弹跳缓动功能可以改成easein或者其他来改变动画

这里有完整的代码：

var s           = Snap().attr({viewBox:'0 0 100 100'}),
    mid         = s.path("M0 40L100 40L100 60L0 60").attr({fill:"#F7F4EA"}),
    ext         = s.path('M0 20L100 20M100 80L0 80').attr({strokeWidth: 4,stroke:"#DFBA68"}),
    clicked     = 0;

s.click(function(){
  if (clicked == 0){
    mid.animate({d:"M0 5L55 50L55 50L0 95"},700,mina.bounce);
    ext.animate({d:"M40 5L90 51.15M90 48.85L40 95"},700,mina.bounce);
    clicked=1;
  }  
  else {
    mid.animate({d:"M0 40L100 40L100 60L0 60"},700,mina.bounce);
    ext.animate({d:"M0 20L100 20M100 80L0 80"},700,mina.bounce);
    clicked=0;
  }
});

html{height:100%;}
body{min-height:100%; background-color:#252626;text-align:center;}
svg{width:20%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>