1

考虑以下代码：

<ul class="nav">
  <li>
    <a href="#">Menu Item 1</a>
  </li>
  <li>
    <a href="#">Menu Item 2</a>
    <ul>
      <li>
        <a href="#">Menu Item 1</a>
      </li>
      <li>
        <a href="#">Menu Item 2</a>
      </li>
      <li>
        <a href="#">Menu Item 3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu Item 3</a>
  </li>
</ul>

以上只是一个标准菜单和子菜单，我最初使用屏幕外隐藏子菜单，left: -999em但我正在尝试为不透明度设置动画，以便当您将鼠标悬停在父项上时子菜单淡入/淡出：

.nav li:hover ul {
  left: 0;
  opacity: 1;
}

.nav ul {
  position: absolute;
  top: 100%;
  left: -999em;
  opacity: 0;
  transition: opacity .3s linear;
}

然而，菜单只会淡入，鼠标移出时它会隐藏而没有动画。我相信这是由于该left: -999em属性，如果我将其设置为left: 0它可以正常工作，但是当您将鼠标悬停在它上时子菜单切换时，即使它被隐藏，我也会遇到这个错误。是否可以以这种方式对不透明度进行动画处理？

这是代码示例：http ://codepen.io/javirvd/pen/zseln

提前致谢。

4

1 回答 1

2

正如您所怀疑的那样，鼠标移出时没有看到不透明度过渡的原因是因为 left 属性会立即更改为left: -999em;. 因此，当元素不在视线范围内时，就会发生过渡。

一个快速的解决方法是向 left 属性添加一个过渡，但是transition-delay在不透明度过渡发生后使用 a 使其改变位置。这样，它应该在将位置更改为悬停时淡入:hover和淡出。left: -999em;

我从未使用过您在 CodePen 示例中使用过的 SCSS，所以我希望我没有犯任何错误，但是以下更改使它对我有用，我认为这就是您想要的方式？

body {
  width: 60%;
  margin: 50px auto;
}

.nav {
  padding: 0;
  margin: 0;
  list-style: none;

  & > li {
    float: left;
    position: relative;
    background: #ccc;
    &:hover ul {
      left: 0;
      opacity: 1;
      transition: opacity .3s linear; /* Added this */
;  
    }
  }

  a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    &:hover {
      background: #ddd;
    }
  }

  ul {
    position: absolute;
    top: 100%;
    left: -999px;
    opacity: 0;
    transition: opacity .3s linear, left .3s linear .3s;  /* Added this */
  }
}
于 2013-06-14T19:34:12.073 回答