Как создать плавный переход на навигацию

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

Как уже упоминалось @ 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

Надеюсь, это поможет!:)

Answer 2

В ваших стилях вы можете настроить свойство .nav-dropdown transition на более высокое время, чтобы оно выглядело более плавным.

.nav-dropdown {
  transition: 2s;
}