CSS替代style =“display：none”

Question

我试图在菜单和子菜单上使用淡入淡出动画，但它只能在第一个上使用。我正在使用一个 转换：所有0.3s缓解0s;可见性：隐藏; margin-top：-10px; on nav> div> ul> li> ul和margin-top：0px; opacity：1; visibility：visible;与悬停。问题来自nav li > ul ul {display: none;}。看起来CSS不能在显示之间动画：无;并显示：block;我不知道如何更换显示器：无;

这里是jsfiddle与显示：无和最后一个子菜单上没有动画，这里是jsfiddle与知名度：隐藏;动画的作品，但我有有线效果

有没有办法让这个动画在所有的子菜单上工作？

Answer 1

试试这个，貌似你是一个平整：

nav{position: relative;} 
 
nav ul { 
 
    list-style: none; 
 
    margin:0; 
 
    padding: 0; 
 
} 
 
li.has_children{ 
 
    position:relative; 
 
} 
 
li.has_children > ul{ 
 
    transition: all 0.3s ease 0s; 
 
    visibility:hidden; 
 
    margin-top:-10px; 
 
    opacity:0; 
 
    background-color: green; 
 
} 
 
li.has_children:hover > ul{ 
 
    margin-top:0px; 
 
    visibility:visible; 
 
    opacity:1; 
 
} 
 
nav > div > ul> li > ul > li > ul{ 
 
    position:absolute; 
 
    top:0; 
 
    left:100%; 
 
    /* You may want to add a width */ 
 
} 
 
nav > div > ul > li { 
 
    float: left; 
 
} 
 
nav >div> ul > li > a:hover{ 
 
    background-color: red; 
 
}

<div id="navbar" class="navbar"> 
 
<nav id="site-navigation" class="navigation main-navigation" role="navigation"> 
 
<div class="menu-mega-container"> 
 
<ul id="menu-mega" class="nav-menu"> 
 
     <li><a href="#">My awesome button</a></li> 
 
     <li class="has_children"><a href="#">My awesome button</a> 
 
      <ul> 
 
       <li><a href="#">awesome link nº 1</a></li> 
 
       <li><a href="#">awesome link nº 2</a></li> 
 
       <li class="has_children"><a href="#">awesome link nº 3</a> 
 
       <ul> 
 
       <li><a href="#">awesome link nº 1</a></li> 
 
       <li><a href="#">awesome link nº 2</a></li> 
 
       <li><a href="#">awesome link nº 3</a></li> 
 
      </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div> 
 
</nav> 
 
</div>

Answer 2

您可以opacity的display属性相结合来获得相同的动画效果。尽管display没有动画效果，但由于opacity的开始和结束点正在制作动画，因此它不被注意。

在你的情况下，它看起来像所有你需要做的就是添加另一条规则设置，如下所示：

nav#site-navigation li > ul ul { 
    display: none; 
    opacity: 0; 

    /* these will fix your jumping issue */ 
    position: absolute; 
    left: 100%; 
    top: 0; 
} 

nav#site-navigation li > ul ul { 
    display: block; 
    opacity: 1; 
} 

此外，你应该考虑仅动画性能transform。当你动画像margin-top或宽度/高度/等动画时，会导致浏览器中的重绘/回流，从而影响性能。 transform动画是用GPU完成的。