浏览器刷新后首次点击 汉堡菜单三线转X动画执行异常

问题根因 #

首次点击无动画是因为你在点击触发的JS函数中才动态为.line元素添加transition过渡规则，首次点击时属性变更和过渡规则同时生效，浏览器无法触发过渡效果，第二次点击开始过渡规则已经存在于元素上，所以动画可以正常运行。

修复步骤 #

1. 修改CSS代码，把过渡规则提前写在.line类中 #

直接在你现有的.line样式块中新增transition规则，不需要JS动态设置：

.line {
    position: relative;
    border: 0.1vh solid black;
    border-radius: 100vh;
    width: 100%;
    /* 新增过渡规则，和你之前JS里设置的参数一致 */
    transition: all 1s linear;
}

如果后续要改回0.1秒的动画，直接把这里的1s改成0.1s即可。

2. 清理JS中重复的过渡设置代码 #

把changeOpacity和rotateAndAdjustMenuButtonXLines两个函数里所有设置style.transition的代码删除，已经在CSS里全局定义过不需要重复设置，清理后的函数如下：

let changeOpacity = x => {
  if (menuIsOpen === false) {
    menuButtonLines[x].style.opacity = '0%'
  } else if (menuIsOpen === true) {
    menuButtonLines[x].style.opacity = '100%'
  }
}

let rotateAndAdjustMenuButtonXLines = (x, y) => {
  if (menuIsOpen === false) {
    menuButtonLines[x].style.transform = 'rotate(45deg)'
    menuButtonLines[y].style.transform = 'rotate(-45deg)'
    menuButtonLines[x].style.top = '42.5%'
    menuButtonLines[y].style.bottom = '42.5%'
  } else if (menuIsOpen === true) {
    menuButtonLines[x].style.transform = 'rotate(0deg)'
    menuButtonLines[y].style.transform = 'rotate(0deg)'
    menuButtonLines[x].style.top = '0%'
    menuButtonLines[y].style.bottom = '0%'
  }
}

3. 补充点击事件监听（如果遗漏的话） #

你提供的JS代码中没有绑定按钮点击事件，补充以下代码放在JS末尾即可触发功能：

menuButton.addEventListener('click', () => {
  // 隐藏中间横线
  changeOpacity(1)
  // 旋转上下两条横线形成X形
  rotateAndAdjustMenuButtonXLines(0, 2)
  // 切换菜单状态
  menuIsOpen = !menuIsOpen
})

修改完成后刷新页面首次点击即可看到正常的过渡动画。

内容的提问来源于stack exchange，提问作者Brandon