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

在您的样式中，您可以将<embed src="pdfFiles/interfaces.pdf" width="260" height="280" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"> .nav-dropdown属性调整为更长的时间，以使其看起来更加平滑。

transition

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的top属性，使其停留在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

希望有帮助！：）

如何在导航

2 个答案: