CSS替代style =「display：none」

我試圖在菜單和子菜單上使用淡入淡出動畫，但它只能在第一個上使用。我正在使用一個 轉換：所有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;我不知道如何更換顯示器：無;CSS替代style =「display：none」

這裏是jsfiddle與顯示：無和最後一個子菜單上沒有動畫，這裏是jsfiddle與知名度：隱藏;動畫的作品，但我有有線效果

有沒有辦法讓這個動畫在所有的子菜單上工作？

來源

2016-08-03 michel lompret

試試這個，貌似你是一個平整：

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>

來源

2016-08-03 16:07:24 FuckYou

感謝您的回答@ user3617339，但即使它在本示例中運行良好，您的代碼在我的WordPress站點中也不起作用。我只有一個問題，它是導航> ul ul { display：none; }導致看起來CSS不能在顯示之間動畫：無;並顯示：block; –

，我無法刪除nav li> ul ul {display：none; }沒有大的子菜單問題。有什麼可以替代顯示：沒有影響CSS動畫？ –

是的。使用可見性：隱藏;不透明度：0;和可見性：可見;不透明度：1;而不是顯示 – FuckYou

您可以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完成的。

來源

2016-08-04 20:01:22

CSS替代style =「display：none」

回答

相關問題