CSS过渡工作不下来

Question

我使用这个页面的代码：

https://codepen.io/shshaw/pen/gsFch

现在，我的CSS是这样的：

.subs { 
visibility: hidden; 
opacity: 0; 
transform: translateY(-2em); 
z-index: -1; 
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; 

width: auto; 
float: left; 
position: absolute; 
text-align: left; 
border: 2px solid #66ec95; 
background: #f4f7f5; 
border-radius: 0 5px 5px 5px; 
margin-top: -10px; 
margin-left: -10px; 
} 

/* SELECTORS */ 

#nav li:hover > .subs { /* with this seletor, only the last property is working */ 
visibility: visible; 
opacity: 1; 
z-index: 1; 
transform: translateY(0%); 
transition-delay: 0s, 0s, 0.3s; 
margin-top: 10px; /* just for test, only this is working */ 
} 

#nav li :hover + .subs { /* this time, the animation are working but other problems occured (see above) */ 
visibility: visible; 
opacity: 1; 
z-index: 1; 
transform: translateY(0%); 
transition-delay: 0s, 0s, 0.3s; 
} 

我的HTML：

<ul id="nav"> 
      <li aria-haspopup="true"> 
       <a href="javascript:void(0)">Services</a> 
       <div class="subs" id="service-subs" aria-haspopup="false"> 
        <a href="~/services/all">Product List</a><br /> 
        <a href="~/services/projects">Projects</a><br /> 
       </div> 
      </li> 
      ... and so on 

因此，.subs的第二个选择器会显示动画，但当我将光标移动到.subs时会中断，并且在显示菜单时由于光标检测.subs而在显示时也会中断很多次。

此外，我不明白为什么它与兄弟选择器工作.subs是#nav li的孩子。

我在做什么错？

谢谢！

Answer 1

我不是100％确定你的代码不工作的原因。我确实重新编写了它，尝试使用我认为更容易处理的一些方法来获取您要做的事情。

1. 利用@keyframes是建立与可重用代码块你的应用程序的好方法。

2. 利用translate3d将进入计算机/设备的GPU，以实现更流畅的翻译。

请注意我没有花时间添加一个HTML包装器，当它们掉落时会隐藏下拉菜单。这很容易通过将整个菜单包装在div中并将overflow设置为hidden来完成。

我很抱歉，我无法帮助你了解为什么你得到了错误。

.sub-menu-parent { 
 
    position: relative; 
 
} 
 

 
.sub-menu { 
 
    position: absolute; 
 
    width: 100%; 
 
    display: none; 
 
    z-index:-1; 
 
} 
 

 
.sub-menu-parent:hover .sub-menu { 
 
    display: block; 
 
    animation: 1s slideDown forwards; 
 
} 
 

 
@keyframes slideDown { 
 
    0% { 
 
    transform: translate3d(0px, -200px, 0px); 
 
    opacity: 0; 
 
    z-index:-1; 
 
    } 
 
    99% { 
 
    transform: translate3d(0px, 0px, 0px); 
 
    opacity: 1; 
 
    z-index:-1; 
 
    } 
 
    100% { 
 
    z-index:0; 
 
    } 
 
} 
 

 
/* presentational */ 
 
body { 
 
    font: 18px/1.4 sans-serif; 
 
} 
 

 
nav a { 
 
    color: #E00; 
 
    display: block; 
 
    padding: 0.5em 1em; 
 
    text-decoration: none; 
 
} 
 
nav a:hover { 
 
    color: #F55; 
 
} 
 
nav ul, nav ul li { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav > ul { 
 
    background: #EEE; 
 
    text-align: center; 
 
} 
 
nav > ul > li { 
 
    display: inline-block; 
 
    border-left: solid 1px #aaa; 
 
} 
 
nav > ul > li:first-child { 
 
    border-left: none; 
 
} 
 

 
.sub-menu { 
 
    background: #DDD; 
 
}

<nav> 
 
    <ul> 
 
    <li class="sub-menu-parent"> 
 
     <a href="#">Menu Item 1</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
     <li><a href="#">Sub Item 2</a></li> 
 
     <li><a href="#">Sub Item 3</a></li> 
 
     <li><a href="#">Sub Item 4</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="sub-menu-parent"><a href="#">Menu Item 2</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
     <li><a href="#">Sub Item 2</a></li> 
 
     <li><a href="#">Sub Item 3</a></li> 
 
     <li><a href="#">Sub Item 4</a></li> 
 
     <li><a href="#">Sub Item 5</a></li> 
 
     <li><a href="#">Sub Item 6</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="sub-menu-parent"><a href="#">Menu Item 3</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
     <li><a href="#">Sub Item 2</a></li> 
 
     </ul></li> 
 
    </ul> 
 
</nav>