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

Question

I have a working navigation, but I want the transition between switching dropdown menus to be smoother. Right now, there is an uncomfortable 'blinking' when you hover between the various main menu links. I know it is caused because of the transition time, but I'm not sure how to fix it. I want the transition to be seamless, as if only the dropdown items themselves are changing (not the background).

Below is my code, and here is a link to a CodePen ( https://codepen.io/zp12345/pen/mQzvXr ). Any help is appreciated. Thanks!

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

In your styles you can adjust the .nav-dropdown transition property to a higher time to make it seem more smooth.

.nav-dropdown {
  transition: 2s;
}

Answer 2

As mentioned by @mike-tung, it is about timing of the transition. You could use an opacity effect on nav-dropdown with low transition timing. It would run smoothly.

.nav-hover:hover {
  .nav-dropdown {
    transition: 0.3s ease;
    opacity: 1;
  }
}

.nav-dropdown {
  transition: 0.2s ease;
  opacity: 0;
  ... 
}

And I see an issue that when you hover out the nav bar, the dropdown is immediately hidden, making it virtually impossible for user to access it.

Thus, I'd suggest you to reduce the top attribute ov nav-dropdown, so it stays right below the NAV menu, and then set the background color only to your .nav-dropdown-item.

.nav-dropdown-item {
    width: 100%;
    background-color: #133751;
... 
}

And giving a padding top to .nav-dropdown:

padding: 20px 0 0; // I let the 0s to not mess with your original padding: 0;

The results would be something like this: https://codepen.io/annabranco/pen/QJYWvm?editors=1100

Hope it helps! :)