Sliding mobile menu transition effect

Question

I am currently trying to make my web page a little more responsive. Right now in mobile resolution I have my hamburger icon in top right corner and as it is clicked a menu shows up below the navbar. However it appears immediately. I would like to make the transition a little smoother so that the div (his display is toggled by javascript from none to flex) slides from the top in a nice way. I am using Tailwind framework.

HTML related code here:

    <!-- Mobile menu -->
<div class="hidden mobile-menu w-screen h-screen uppercase max-w-full">
  <ul class="h-4/6 py-24 flex flex-col items-center justify-evenly text-xl">
    <li class="mobile-menu-link"><a href="./index.html#omne" class="px-2 py-4">O mně</a></li>
    <li class="mobile-menu-link"><a href="./index.html#cenik" class="px-2 py-4">Ceník</a></li>
    <li class="mobile-menu-link"><a href="./index.html#faq" class="px-2 py-4">FAQ</a></li>
    <li class="mobile-menu-link"><a href="./index.html#contact" class="px-2 py-4">Kontakt</a></li>
   </ul>
</div>

and here Javascript:

/* MOBILE MENU NAVBAR */
// find HTML elements only after DOM loaded!!!! if DOM did't load you can't find it
window.addEventListener('DOMContentLoaded', (event) => {
// Grab HTML Elements
const btn = document.querySelector(".mobile-menu-button");
const menu = document.querySelector(".mobile-menu");
const links = document.querySelectorAll(".mobile-menu-link")

// Add Event Listeners
  btn.addEventListener("click", () => {
    menu.classList.toggle("hidden");
    });
  links.forEach((link) => {
    link.addEventListener("click", () => {
      menu.classList.toggle("hidden");
    });
  });
});
/* END OF MOBILE MENU NAVBAR */

I tried setting the transition of the main div to some values but nothing happened, I feel like the transition feature works only for some elements? I don't really understand the transition feature because sometimes it takes place for:hover sometimes for some different action. It's really confusing for me. Any help is very appreciated.

PS: You can also check the current state of the page here .

Thanks in advance

Answer 1

You should use transform with transition and move the element on Y axis (for enter from top). Simplified example:

.mobile-menu {
  transform: translateY(0);
  transition: transform 0.3s linear;
}

.mobile-menu.hidden {
  transform: translateY(-100%);
}

Also, if you have them, remove the display or visibility changes to the .mobile-menu element since those can't be animated with transition .