html - 如何在导航上创建平滑过渡
问题描述
我有一个工作导航,但我希望切换下拉菜单之间的过渡更顺畅。现在,当您将鼠标悬停在各个主菜单链接之间时,会有一种不舒服的“闪烁”。我知道这是由于过渡时间造成的,但我不知道如何解决它。我希望过渡是无缝的,好像只有下拉项目本身在变化(而不是背景)。
下面是我的代码,这里是 CodePen 的链接(https://codepen.io/zp12345/pen/mQzvXr)。任何帮助表示赞赏。谢谢!
HTML
<div class="nav-links">
<ul class="nav-primary" id="nav-primary">
<li class="nav-item-top">
<a href="#link">
<span class="nav-item-label">Item One</span>
</a>
<ul class="nav-dropdown">
<li class="nav-dropdown-item">
<a href="#link">
<h5>1.1</h5>
</a>
</li>
<li class="nav-dropdown-item">
<a href="#link">
<h5>1.2</h5>
</a>
</li>
</ul>
</li>
<li class="nav-item-top">
<a href="#link">
<span class="nav-item-label">Item Two</span>
</a>
<ul class="nav-dropdown">
<li class="nav-dropdown-item">
<a href="#link">
<h5>2.1</h5>
</a>
</li>
<li class="nav-dropdown-item">
<a href="#link">
<h5>2.2</h5>
</a>
</li>
</ul>
</li>
<li class="nav-item-top">
<a href="#link">
<span class="nav-item-label">Item Three</span>
</a>
<ul class="nav-dropdown">
<li class="nav-dropdown-item">
<a href="#link">
<h5>3.1</h5>
</a>
</li>
<li class="nav-dropdown-item">
<a href="#link">
<h5>3.2</h5>
</a>
</li>
</ul>
</li>
<li class="nav-item-top">
<a href="#link">
<span class="nav-item-label">Item Four</span>
</a>
<ul class="nav-dropdown">
<li class="nav-dropdown-item">
<a href="#link">
<h5>4.1</h5>
</a>
</li>
</ul>
</li>
</ul>
</div>
SCSS
.nav-primary {
display: flex;
flex-grow: 1;
justify-content: center;
list-style-type: none;
padding-left: 0;
}
.nav-item-top .nav-item-label {
color: #383838;
font-size: 18px;
padding: 0 24px;
cursor: pointer;
}
.nav-item-top {
&:hover {
.nav-item-label {
color: #319644;
}
.nav-dropdown {
visibility: visible;
opacity: 1;
padding: 16px 0;
}
}
}
.nav-dropdown {
width: 100%;
left: 0;
position: fixed;
top: 60px;
transition: .2s;
opacity: 0;
z-index: 3;
padding: 0;
background-color: #133751;
color: #133751;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
list-style-type: none;
.nav-dropdown-item {
transition: .2s;
padding: 12px 24px;
text-align: center;
color: #fff;
cursor: pointer!important;
}
h5 {
color: #fff;
margin: 0;
text-transform: none;
font-size: 16px;
}
}
.nav-dropdown-item {
a {
transition: all 0.2s;
text-decoration: none;
}
}
解决方案
正如@mike-tung 所提到的,这是关于过渡的时机。您可以在具有低过渡时间的导航下拉菜单上使用不透明效果。它会顺利运行。
.nav-hover:hover {
.nav-dropdown {
transition: 0.3s ease;
opacity: 1;
}
}
.nav-dropdown {
transition: 0.2s ease;
opacity: 0;
...
}
而且我看到一个问题,当您将鼠标悬停在导航栏上时,下拉菜单会立即隐藏,使用户几乎无法访问它。
因此,我建议您减少顶部属性 ov nav-dropdown,使其保持在 NAV 菜单的正下方,然后仅将背景颜色设置为您的 .nav-dropdown-item。
.nav-dropdown-item {
width: 100%;
background-color: #133751;
...
}
并为 .nav-dropdown 提供填充顶部:
padding: 20px 0 0; // I let the 0s to not mess with your original padding: 0;
结果将是这样的: https ://codepen.io/annabranco/pen/QJYWvm?editors=1100
希望能帮助到你!:)
推荐阅读
- python - 在 nsmallest pandas 之后更改列中的值
- javascript - 批量下载一堆文件,限制下载大小为 100 KB
- google-cloud-platform - 在谷歌云 dns 中导入加权 DNS 记录
- html - 我可以使用 Tailwind CSS 在悬停时实现带下划线的按钮吗?
- c# - 如何设置 OpenTK 窗口图标
- java - 获取特定于连接的下一个自动编号值(并发)
- python - 如何仅使用python将以小时+分钟编写的时间转换为分钟
- html - 如何使用 JQuery 向 HTML 中的 JSON 表添加分页?
- git - 项目绑定到 TFS 或 GIT 时共享哪些信息?
- flutter - 如何在flutter中从sqlite数据库中获取两个日期之间的所有记录?