css做一个可以变成关闭图标的菜单按钮

不记得什么是时候在某个网站上看到一个菜单按钮, 初始状态是三条横线, 点击打开菜单后可以变成关闭按钮, 这个过程有一个过度动画, 效果像下面这样(因为想不起来是哪个网站了, 所以下面的的gif是我根据印象实现后的效果)

这个东西实现起来挺简单, 但是这个过度动画挺有意思的;

首先是html, 外层一个div.menu元素, 里面放三个span用作三条杠

然后写点css, 设置下menu的宽高和三条横杠, 同时也设置下过度相关的属性; 我这里用了less作为css的预处理器:

@menu-size: 50px;
@menu-stroke: 4px;
@menu-stroke-color: #fff;
@menu-animation-duration: .3s;

.menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  height: @menu-size;
  span {
    width: @menu-size;
    height: @menu-stroke;
    display: block;
    transition-property: opacity transform top;
    transition-duration: @menu-animation-duration;
    background-color: @menu-stroke-color;
  }
  span:nth-child(2){
    transition-duration: .1s;
  }
}

基本的样式写完后写开始写过度之后的样式, 给这个样式取一个名字叫menu-closeable

.menu-closeable {
  position: relative;
  span:nth-child(1) {
    position: absolute;
    transform: rotateZ(45deg);
    top: @menu-size/2;
  }
  span:nth-child(2) {
    opacity: 0;
  }
  span:nth-child(3) {
    position: absolute;
    transform: rotateZ(-45deg);
    
    top: @menu-size/2;
  }
}

这些样式写完后需要通过js来触发, 点击后在让菜单关闭状态和普通状态间进行切换

const el = document.querySelector('.menu');
let clicked = false;
el.addEventListener('click', () => {
  clicked = !clicked;
  if (clicked) {
  el.classList.add('menu-closeable');
  } else {
    el.classList.remove('menu-closeable');
  }
})

这样就完成了, 每次点击菜单, 菜单都会在三条横杠和一个叉叉的状态的间切换, 并且还有过度动画, 就像开头的git里面那样.