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

考虑以下代码：

<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

属性造成的，如果我将其设置为

left:0

，它可以正常工作，但是当您将鼠标悬停在子菜单上时，即使它是隐藏的，当子菜单切换时也会出现此错误。是否可以这样设置不透明度的进出动画

下面是代码示例：

---

提前感谢。

正如您所怀疑的那样，当鼠标移出时，为什么不进行不透明度转换，是因为left属性立即更改为

left:-999em。因此，当元素不在视图中时，会发生转换

一个快速修复方法可以是也向left属性添加一个转换，但是使用
转换延迟
，使其在发生不透明度转换后更改位置。这样，它应该在
上淡入：悬停
并淡出，然后再将位置更改为
左侧：-999em当您悬停在外时

我从来没有使用过SCS，您在CodePen示例中使用过SCS，所以我希望我没有犯任何错误，但是下面的更改使它适合我，我想这就是您想要的方式

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

太好了，我完全忘记了延迟，也谢谢你的解释，这就是我所想的
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 */
  }
}