將轉換添加到下拉菜單

Question

我不確定這是否可以按照構建的方式完成，但是我希望爲我的下拉菜單添加轉換效果。任何會使它看起來不那麼波動的東西。 SLide，淡入淡出等Codepen下面。

<div id="nav-wrap"> 

<ul> 
    <li id="link-one" class="orange"> 
    <a href="#" class="parent-one-link"><span>Test</span></a> 

    <div class="subnav"> 
      <ul> 
      <li><a href="#">Test</a></li> 
      <li><a href="#">Test</a></li> 
      <li><a href="#">Test</a></li> 
      <li><a href="#">Test</a></li> 
      <li><a href="#">Test</a></li> 
      <li><a href="#">Test</a></li> 
      </ul> 
     </div><!-- /.subnav --> 

    </li> 

    <li class="red"><a href="#"><span>Test</span></a></li> 

    <li class="pink"><a href="#"><span>Test</span></a></li> 

    <li class="purple"><a href="#"><span>Test</span></a></li> 

    <li class="blue"><a href="#"><span>Test</span></a></li> 

    <li class="green"><a href="#"><span>Test</span></a></li> 

    <li class="yellow-facebook"><a href="#"><span></span></a></li> 

</ul> 

</div> <!-- nav-wrap --> 

#nav-wrap .doubleLine { 
    display: table-cell; 
    line-height: 1.2em; 
    width:65.275%; 
} 

#nav-wrap { 
    width:100%; 
    height:100px; 
    font-weight:500; 
    padding: 0; 
    left:0; 
    font-family: 'Raleway', Arial, sans-serif; 
    z-index:100; 
    float:left; 
} 

#nav-wrap ul { 
    list-style-type: none; 
    margin: 0; 
    padding:0; 
    text-transform: uppercase; 
} 

#nav-wrap ul li { 
    width:14.275%; /* ~(100/7) */ 
    display:block; 
    float:left; 
    text-align:center; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#nav-wrap ul li + li { 
    border-left: 1px #fff solid !important; 
} 

#nav-wrap ul li a { 
    width:100%; 
    display: block; 
    height: 100%; 
    position: relative; 
    color:#FFFFFF !important; 
    text-decoration:none; 
} 

#nav-wrap ul li span { 
    display: inline-block; 
    vertical-align: middle; 
    height: 100px; 
    font-size:1.45em; 
    text-align: center; 
    padding: 0 5% 0 5%; /* was 0 20px */ 
    line-height: 100px; 
} 

#nav-wrap ul li.yellow-facebook { 
    width:14.275%; 
} 

#nav-wrap ul li.yellow-facebook a { 
    background-size:130px 26px; /* > 25px */ 
} 

li .subnav { 
    display: none; 
    /*position: absolute; */ 
    clear: both; 
    margin-left: 0; 
    font-size:0.9em; 
} 

.subnav ul { 
    margin-left: 0; 
    float:left; 
    padding:0; 
    width:100%; 
} 

.subnav ul li { 
    margin: 0 0 0 0; 
    width:100% !important; 
    height:23px; 
    float:none !important; 
} 

.subnav ul li a { 
    padding: 10px 0 3px 0; 
    /*background-image: url(../images/submenu-background-divider.png); 
    background-repeat:no-repeat; 
    background-position:left;*/ 
} 

#nav-wrap .subnav ul li + li { 
    border-left: none !important; 
} 

.subnav { 
    width:100%; 
    padding: 0; 
    margin: 0.05% 0 0 0; 
    border-top:#FFF 1px solid; 
} 

.subnav ul li a:link, a:active, a:visited { 
    text-decoration:none; 
} 

.subnav ul li a:hover { 
    color:#000; 
    text-decoration:none; 
} 

li:hover > .subnav {display:inline-block; left:0;} 

#nav-wrap ul li.orange a { 
    background-color:#f37028; 
} 
#nav-wrap ul li.orange a:hover { 
    color: #231f20 !important; 
} 
#nav-wrap ul li.red a { 
    background-color:#ed1b24; 
} 
#nav-wrap ul li.red a:hover { 
    color: #231f20 !important; 
} 
#nav-wrap ul li.pink a { 
    background-color:#e54198; 
} 
#nav-wrap ul li.pink a:hover { 
    color: #231f20 !important; 
} 
#nav-wrap ul li.purple a { 
    background-color:#6b439c; 
} 
#nav-wrap ul li.purple a:hover { 
    color: #231f20 !important; 
} 
#nav-wrap ul li.blue a { 
    background-color:#0193cf; 
} 
#nav-wrap ul li.blue a:hover { 
    color: #231f20 !important; 
} 
#nav-wrap ul li.green a { 
    background-color:#80c02c; 
} 
#nav-wrap ul li.green a:hover { 
    color: #231f20 !important; 
} 
#nav-wrap ul li.yellow-facebook a { 
    background-color:#fff300; 
    background-image:url(../images/social-media/facebook-text.png); 
    background-repeat:no-repeat; 
    background-position:center; 
} 
#nav-wrap ul li.yellow-facebook a:hover { 
    color: #231f20; 
    background-image:url(../images/social-media/facebook-text_over.png); 
} 

http://codepen.io/Compton/pen/jLGyo/

Answer 1

你可以嘗試CSS3過渡，只有你將不得不使用的不透明度，而不是顯示沒有的。

添加此

li:hover > .subnav { 
    display:inline-block; 
    left:0; 
    -webkit-transition: all 0.4s ease-in; 
-moz-transition: all 0.4s ease-in; 
-o-transition: all 0.4s ease-in; 
    transition: all 0.4s ease-in; 
    opacity:1.0; 
} 

並更改顯示沒有這樣：

li .subnav { 
    opacity:0; 
    /*position: absolute; */ 
    clear: both; 
    margin-left: 0; 
    font-size:0.9em; 
} 

jQuery的可以做一些滑動，如果你喜歡的話，但是這是一個稍微簡單設置，您也可以調整高度，使其滑動下來，如果你喜歡而不是淡入。

Answer 2

把它放到動畫元素CSS：

transform: translate3d(0, 0, 0); 
-webkit-backface-visibility: hidden; 
-webkit-perspective: 1000; 

它基本上愚蠢的瀏覽器，過渡或動畫是3D，並啓用GPU加速和基於Webkit的瀏覽器禁用雙面飛機。