Question

请考虑以下代码：

<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隐藏了子菜单，但是我试图设置不透明度的动画，以便当您将鼠标悬停在父项上时子菜单会淡入/淡出： / p>

.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/javiervd/pen/zseln

提前致谢。

Answer 1

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

快速解决方法也可以是向左侧属性添加转换，但使用transition-delay可以在不透明度转换发生后更改位置。通过这种方式，当您将鼠标悬停在:hover时，它应该会在left: -999em;上淡入并淡出，然后才会将位置更改为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 */ } }。

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

{{1}}

如何动画最初位于屏幕外的元素的不透明度？

1 个答案: