html - 绝对位置平滑过渡
问题描述
我在鼠标悬停时为汉堡菜单设置动画,absolute
位置很好,但我希望它平滑。我试图将过渡设置为跨度,但它没有用。这是我的代码。
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 从其原始位置移动时过渡平滑。
解决方案
您可以像这样简化代码:
#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>
推荐阅读
- php - 不同机器上不同的位运算结果
- c - 什么时候结构没有填充?
- android - Android 安装程序包数据库 - 由 getInstallerPackageName() 返回
- google-sheets - 排除标头查询
- azure-devops-rest-api - 在 Azure DevOps REST API 中获取诊断日志中没有属性描述
- python - 我想提取 cx,cy,r 的值,它们都位于第 3 列
- angular - 制作动态 Angular 组件
- python - 使用 `thread.join()` 时多线程冻结
- arrays - 如何将数组传递给函数
- visual-studio-code - 如何通过将鼠标悬停在 VSCode 上来显示代码错误