利用CSS3特性生成菜单动画

工作需要在网站移动端的菜单more从三条横线，展开时变成X，利用动画实现。

HTML代码

1
2
3
4
5
<div class="menu-wrap close">
  <div class="menu-line menu-line-top"></div>
  <div class="menu-line menu-line-middle"></div>
  <div class="menu-line menu-line-bottom"></div>
</div>

可以看到有一个wrap类作为父div，里面包含三条横线，默认菜单是open状态，点击可以展开菜单。

点击时，会将open类替换成close类，此时中间线隐藏，上下两条线进行旋转，成X，点击进行关闭。

SCSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.menu-wrap {
  margin:50px;
  .menu-line{
    width:40px;
    height:5px;
    background-color:#777;
    margin:5px 0;
    transition:1s;
    tranform-origin:50% 50%;
  }
}
.close {
  .menu-line{
    &-top{
      transform:rotate(45deg) translate(0,14px);
    }
    &-middle {
      opacity:0;
    }
    &-bottom {
      transform:rotate(-45deg) translate(0,-14px);
    }
  }
}

JS代码

1
2
3
4
5
6
7
$('.menu-wrap').on('click',function(e){
  if($(this).hasClass('open')) {
    $(this).attr('class','menu-wrap close');
  }else{
    $(this).attr('class','menu-wrap open');
  }
});

最终效果如下：
http://codepen.io/fiona2016/pen/yMdjXM

See the Pen menu-collapase by Fiona (@fiona2016) on CodePen.