我正在使用绝对定位在鼠标悬停时动画化汉堡菜单,看起来不错,但我希望它更加平滑。我尝试为 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从它们原来的位置移动时,过渡能够更加平滑。
background-position
毫无疑问是最好的选择。我已经编辑了答案,特别添加了transition
到background-position
。 - a--m