これをどのようにアニメーションできますか？

Question

さて、私は自分のサイトの簡単なハンバーガードロップダウンメニューを作った。表示をブロックに設定するクラスを追加するためにトグルボタンをクリックすると、noneを表示するように設定されています。

私は表示プロパティをアニメーション化できないことは知っていますが、表示プロパティを使用せずに同じことを達成する方法が他に何か分かりません。

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; } } 

はJavaScript：

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); 

完全な作業例：

JavaScriptを使用して、その後

.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>