绝对定位平滑过渡

Question

我正在使用绝对定位在鼠标悬停时动画化汉堡菜单，看起来不错，但我希望它更加平滑。我尝试为 span 设置过渡效果，但没有起作用。这是我的代码：

const mainHeader = document.querySelector('#header');
const barOne = document.querySelector('.bar-1');
const barThree = document.querySelector('.bar-3');
mainHeader.addEventListener('mouseover', () => {
  barOne.style.top = '6px';
  barThree.style.top = '-6px';
})

#header {
  position: fixed;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  cursor: pointer;
}

nav.menu span {
  background: #3d3d3d;
  width: 30px;
  height: 1px;
  display: block;
  margin-bottom: 6px;
  position: relative;
  transition: all 1s;
}

<header id="header">
  <nav class="menu">
    <span class="bar-1"></span>
    <span></span>
    <span class="bar-3"></span>
  </nav>
</header>

我希望当bar-1和bar-3从它们原来的位置移动时，过渡能够更加平滑。

- Taste of Leaving

Answer 1

您可以这样简化您的代码：

#header {
  position: fixed;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  cursor: pointer;
}

nav.menu {
  background: 
    linear-gradient(#3d3d3d,#3d3d3d) top,
    linear-gradient(#3d3d3d,#3d3d3d) center,
    linear-gradient(#3d3d3d,#3d3d3d) bottom;
  background-size:100% 1px;
  background-repeat:no-repeat;
  width: 30px;
  height: 15px;
  transition: background-position 1s;
}
nav.menu:hover {
  background-position:center;
}

<header id="header">
  <nav class="menu">
  </nav>
</header>

- Temani Afif

---

非常好的想法！为了动画背景，background-position毫无疑问是最好的选择。我已经编辑了答案，特别添加了transition到background-position。 - a--m

Answer 2

不需要使用javascript。最重要的是，为了使top属性可以进行动画效果，您必须设置一个默认值，例如：

top: 0px;

这里是一个例子：

#header {
  position: fixed;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  cursor: pointer;
}

nav.menu span {
  background: #3d3d3d;
  width: 30px;
  height: 1px;
  display: block;
  margin-bottom: 6px;
  position: relative;
  transition: all 1s;
  top: 0px;
}

#header:hover .bar-1 {
  top: 6px
}

#header:hover .bar-3 {
  top: -6px
}

<header id="header">
  <nav class="menu">
    <span class="bar-1"></span>
    <span></span>
    <span class="bar-3"></span>
  </nav>
</header>

- a--m