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

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;。所以转换发生在元素在视线之外的时候。

一个快速的修复可以是添加一个过渡到left属性，但与transition-delay使它改变位置后，不透明度过渡已经发生。这样，当你悬停时，它应该在:hover上逐渐淡入，在left: -999em;上改变位置之前逐渐淡入。

我从来没有使用SCSS之前，你在你的CodePen的例子中使用，所以我希望我没有做任何错误，但下面的变化使它为我工作，我认为这是你想要的?

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 */
  }
}