モバイルドロップにアニメーションを適用する

Question

私のonClick関数はうまく動いていますが、メニューにはonClickと表示されるように柔らかい遷移があるようにいくつかのCSSアニメーションを適用しようとしています。私は複数の要素にアニメーションを適用しましたが、それらのどれも遷移を適用することはありません。

<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

私は、これはachivedする方法についてJS Fiddle Exampleを行いました。

JS例：

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

ご希望の場合も.slide機能を追加することができます。 =>Example

JSフィドルリンクを確認してください。私はできるだけシンプルにしました。それ以上の質問がある場合は、コメントで尋ねるだけです。