드롭 다운에 전환 추가하기

Question

이것이 빌드 된 방식으로 수행 할 수 있는지 확실하지 않지만 드롭 다운에 전환 효과를 추가하고 싶습니다. 그것을 덜 고르지 않게 보이게 만들만한 것은 무엇이든. 슬라이드, 페이드 등. 아래 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 가속을 가능하게하고 웹킷 기반 브라우저에서 양면 평면을 사용하지 않도록 설정합니다.