如何爲此設置動畫？

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

刪除顯示屬性作爲開始。既然你不能用CSS3動畫高度auto，我建議你去與max-height黑客：

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

然後使用javascript：

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

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

toggleButton.addEventListener("click", toggleMenu); 

一個完整的工作示例：

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>