如何在导航上创建平滑过渡

Question

我有一个正常工作的导航，但我希望切换下拉菜单之间的过渡更顺畅。现在，当您将鼠标悬停在各个主菜单链接之间时，会有一种不舒服的“闪烁”。我知道这是由于过渡时间造成的，但我不知道如何解决它。我希望过渡是无缝的，好像只有下拉项目本身在变化（而不是背景）。

以下是我的代码，这里是 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;
  }
}

Answer 1

在您的样式中，您可以将 .nav-dropdown transition 属性调整为更高的时间以使其看起来更平滑。

.nav-dropdown {
  transition: 2s;
}

Answer 2

正如@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

希望对您有所帮助！ :)