javascript - 菜单在不应该的时候中断

Question

这个问题没有给我任何答案:/

// Hello there

Answer 1

这在 codepen 中看起来确实很奇怪。通过调整过渡和变换设置，我让它在 codepen 上看起来正确:

header div div#menu_btn .menu_cont span {
  overflow: visible;
  position: absolute;
  left: 0;
  transition: transform 250ms ease-out; /* transform instead of all */
  display: block;
  height: 3px;
  width: 25px;
  background-color: black;
  /*  transform-origin: right center; */
}

header div div#menu_btn .menu_cont span.one.transition {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 6px; /* changed */
}
header div div#menu_btn .menu_cont span.two.transition {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  bottom: 5px; /* changed */
}