Anwenden der Drop-Down-Animation auf Mobilgerät

Question

Meine onClick-Funktion funktioniert einwandfrei, aber ich versuche, eine CSS-Animation anzuwenden, sodass das Menü einen weichen Übergang aufweist, da onClick angezeigt wird. Ich habe die Animation auf mehrere Elemente angewendet, aber keiner von ihnen wendet den Übergang an.

<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

i ein JS Fiddle Example auf gemacht haben, wie diese achived werden kann.

JS Beispiel:

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

Sie können auch eine .slide Funktion hinzufügen, wenn Sie es wünschen. =>Example

Bitte überprüfen Sie die JS Fiddle Link. Ich habe es so einfach wie möglich gemacht. Wenn Sie weitere Fragen haben, fragen Sie einfach in einem Kommentar.