Question

我正在使用水平下拉导航菜单。我正在使用过渡来使其变慢，但是我遇到了一个错误。如果您从一个导航项目跳到另一个导航项的速度太快（转换完成之前？），仍然会显示另一个下拉菜单。很难解释-但是我已经创建了一个CodePen。

我确定我只是忽略了一些基本知识...感谢所有反馈。先感谢您！

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

当您显示spawn ssh -o StrictHostKeyChecking=no $env(username)@$env(hostname) # etc etc时，可以在悬停时使用transition-delay:0.2s;。快速移动鼠标时，不会显示下拉菜单。

您可以here对其进行测试

过渡效果产生错误

1 个答案: