將下拉動畫應用到移動導航

Question

我的onClick函數工作得很好，但我嘗試應用一些css動畫，以便菜單在顯示onClick時具有軟轉換。我已將動畫應用於多個元素，但它們都不會應用轉場。

<div id="mobileNav" class="mobileNav mobileNavHidden"> 
    <div class="row hdrIcons"> 
     <div> 
      <ul class="mobileIcons"> 
       <li> 
        <a href="#"> 
         <i></i> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <i></i> 
        </a> 
       </li> 
       <li> 
         <a href="#"> 
         <i></i> 
         </a> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <ul> 
     <li><a href="#">about</a></li> 
     <li><a href="services.html">services</a></li> 
     <li><a href="#">portfolio</a></li> 
     <li><a href="#">blog</a></li> 
     <li><a href="#">contact</a></li> 
    </ul> 
</div> 

.mobileNavHidden { 
    display: none; 
} 

.mobileNav { 
    z-index: 100000; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-transition:all .26s ease-in-out; 
    -moz-transition:all .26s ease-in-out; 
    -ms-transition:all .26s ease-in-out; 
    -o-transition:all .26s ease-in-out; 
    transition:all .26s ease-in-out; 
} 

var nav = document.querySelector('#mobileNav') 

document.querySelector('.hambugerMenu').addEventListener('click',()=> { 
    hideShowNav() 
}) 
function hideShowNav() { 
    if (nav.classList.contains('mobileNavHidden')) { 
     nav.classList.remove("mobileNavHidden") 
    } 
    else { 
     nav.classList.add("mobileNavHidden") 
    } 
} 

Answer 1

我已經做了JS Fiddle Example這是如何可以achived。

JS例：

$('#button').click(function() { 
     $("#myDiv").fadeToggle("slow", "linear") 
    }); 

您還可以根據需要添加一個.slide功能。 =>Example

請檢查JS Fiddle Link。我儘可能簡單。如果您有任何進一步的問題，請發表評論。