css - 如何为最初位于屏幕外的元素的不透明度设置动画？

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 将子菜单隐藏在屏幕外，但我正在尝试设置不透明度动画，以便子菜单在您悬停时淡入/淡出在父项上:

.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;。因此，当元素不在 View 中时，就会发生过渡。

一个快速的修复方法可能是也向 left 属性添加一个过渡，但使用 transition-delay 使其在不透明度过渡发生后改变位置。这样，它应该在 :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 */
  }
}