어떻게 애니메이트 할 수 있습니까?

Question

좋아, 그럼 내 햄버거 드롭 다운 메뉴를 만들었 어. 차단을 표시 할 클래스를 추가하기 위해 토글 버튼을 클릭하면 아무 것도 표시하지 않도록 설정했습니다.

나는 디스플레이 속성이 애니메이션 될 수 없다는 것을 알고 있지만 디스플레이 속성을 사용하지 않고 동일한 것을 어떻게 달성 할 수 있는지 알지 못합니다.

HTML :

<nav class="top-navigation" role="navigation" id="top-navigation"> 

    <div class="container"> 

     <div class="top-navigation_header"> 

      <button class="top-navigation-toggle" id="menu-toggle"> 
       <span class="toggle_bars"></span> 
       <span class="toggle_bars"></span> 
       <span class="toggle_bars"></span> 
      </button> 

      <img src="//placehold.it/200x100" alt="Logo"> 

     </div> 

    <ul class="top-navigation_menu" id="menu"> 

     <li><a href="">Home</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">Services</a></li> 
     <li><a href="">Portfolio</a></li> 
     <li><a href="">Blog</a></li> 
     <li><a href="">Contact</a></li> 

    </ul> 

    </div> 

</nav> 

CSS :

.top-navigation { 
    position: fixed; 
    width: 100%; 
    z-index: 10; } 
    .top-navigation:after, .top-navigation:before { 
    content: ""; 
    display: table; } 
    .top-navigation:after { 
    clear: both; } 

.top-navigation_header { 
    float: left; 
    padding: 24px 16px; } 
    .top-navigation_header img { 
    width: 100px; 
    float: left; } 

.top-navigation_menu { 
    float: right; 
    color: #FFFFFF; } 
    .top-navigation_menu li { 
    display: inline-block; 
    margin: 20px 0; } 
    .top-navigation_menu li a { 
     display: block; 
     padding: 16px; 
     text-transform: uppercase; 
     font-size: 13px; } 

.collapse { 
    display: block !important; } 

.top-navigation-toggle { 
    display: none; 
    background-color: transparent; 
    border: 0px; 
    outline: 0px; 
    margin: 0px; 
    padding: 16px; 
    cursor: pointer; 
    float: right; 
    z-index: 2; } 
    .top-navigation-toggle .toggle_bars { 
    display: block; 
    width: 18px; 
    height: 2px; 
    margin: 4px 0; 
    background-color: #FFFFFF; } 

@media screen and (max-width: 700px) { 
    .top-navigation { 
    background-color: #363636; } 

    .top-navigation_header { 
    width: 100%; } 
    .top-navigation_header img { 
     width: 100px; 
     float: left; } 

    .top-navigation_menu { 
    display: none; 
    float: left; 
    width: 100%; } 
    .top-navigation_menu li { 
     display: block; 
     margin: 20px 0; } 
     .top-navigation_menu li a { 
     display: block; 
     padding: 16px; 
     text-transform: uppercase; 
     font-size: 13px; } 

    .top-navigation-toggle { 
    display: block; } } 

자바 스크립트 : 시작으로

var menu = document.getElementById("menu"); 
    var toggleButton = document.getElementById("menu-toggle"); 

    function toggleMenu() { 
     menu.classList.toggle("collapse"); 
    } 

    toggleButton.addEventListener("click", toggleMenu); 

Answer 1

제거 디스플레이 속성입니다.

var topnavigation = document.getElementById("top-navigation"); 
var toggleButton = document.getElementById("menu-toggle"); 

function toggleMenu() { 
    topnavigation.classList.toggle("collapse"); 
} 

toggleButton.addEventListener("click", toggleMenu); 

완전한 작동 예 :

자바 스크립트로 다음

.top-navigation { 
max-height:102px; 
overflow:hidden; 
transition:0.2s all ease; 
} 
.collapse{max-height:1000px;} 

: 그리고 당신은 CSS3으로 auto에 높이를 애니메이션 할 수 없기 때문에, 나는 당신이 max-height 해킹 함께 갈 제안

var topnavigation = document.getElementById("top-navigation"); 
 
    var toggleButton = document.getElementById("menu-toggle"); 
 

 
    function toggleMenu() { 
 
     topnavigation.classList.toggle("collapse"); 
 
    } 
 

 
    toggleButton.addEventListener("click", toggleMenu);

.top-navigation { 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 10; 
 
    max-height:102px; 
 
overflow:hidden; 
 
transition:0.5s all ease; 
 
    } 
 
    .collapse{max-height:1000px;} 
 
    .top-navigation:after, .top-navigation:before { 
 
    content: ""; 
 
    display: table; } 
 
    .top-navigation:after { 
 
    clear: both; } 
 

 
.top-navigation_header { 
 
    float: left; 
 
    padding: 24px 16px; 
 
    box-sizing: border-box; 
 
} 
 
    .top-navigation_header img { 
 
    width: 100px; 
 
    
 
    float: left; } 
 

 
.top-navigation_menu { 
 
    float: right; 
 
    color: #FFFFFF; } 
 
    .top-navigation_menu li { 
 
    display: inline-block; 
 
    margin: 20px 0; } 
 
    .top-navigation_menu li a { 
 
     display: block; 
 
     padding: 16px; 
 
     text-transform: uppercase; 
 
     font-size: 13px; } 
 

 
.collapse { 
 
    display: block !important; } 
 

 
.top-navigation-toggle { 
 
    display: none; 
 
    background-color: transparent; 
 
    border: 0px; 
 
    outline: 0px; 
 
    margin: 0px; 
 
    padding: 16px; 
 
    cursor: pointer; 
 
    float: right; 
 
    z-index: 2; } 
 
    .top-navigation-toggle .toggle_bars { 
 
    display: block; 
 
    width: 18px; 
 
    height: 2px; 
 
    margin: 4px 0; 
 
    background-color: #FFFFFF; } 
 

 
@media screen and (max-width: 700px) { 
 
    .top-navigation { 
 
    background-color: #363636; } 
 

 
    .top-navigation_header { 
 
    width: 100%; } 
 
    .top-navigation_header img { 
 
     width: 100px; 
 
     float: left; } 
 

 
    .top-navigation_menu { 
 
    float: left; 
 
    width: 100%; } 
 
    .top-navigation_menu li { 
 
     display: block; 
 
     margin: 20px 0; } 
 
     .top-navigation_menu li a { 
 
     display: block; 
 
     padding: 16px; 
 
     text-transform: uppercase; 
 
     font-size: 13px; } 
 

 
    .top-navigation-toggle { 
 
    display: block; } }

<nav class="top-navigation" role="navigation" id="top-navigation"> 
 

 
    <div class="container"> 
 

 
     <div class="top-navigation_header"> 
 

 
      <button class="top-navigation-toggle" id="menu-toggle"> 
 
       <span class="toggle_bars"></span> 
 
       <span class="toggle_bars"></span> 
 
       <span class="toggle_bars"></span> 
 
      </button> 
 

 
      <img src="//placehold.it/200x100" alt="Logo"> 
 

 
     </div> 
 

 
    <ul class="top-navigation_menu" id="menu"> 
 

 
     <li><a href="">Home</a></li> 
 
     <li><a href="">About</a></li> 
 
     <li><a href="">Services</a></li> 
 
     <li><a href="">Portfolio</a></li> 
 
     <li><a href="">Blog</a></li> 
 
     <li><a href="">Contact</a></li> 
 

 
    </ul> 
 

 
    </div> 
 

 
</nav>