Question

我正在制作一个自定义的汉堡包菜单动画，其中汉堡包菜单在点击时会转换为两种形状：一个面向右边的三角形和一个右边的V形符号。

我仍然遇到了一些平滑动画的问题;我正在使用border-color来实现我想要的效果，但是双击（='反向'动画）并不像起始动画那样平滑。

我正在使用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>

汉堡菜单动画

1 个答案: