0

Hi would anybody be able to help me out I made a start of a a11y responsive menu and i'm trying to be able that when the menu is open when you reclick on the hamburger the animation reverses itself but right now there's no transition from active to hidden here's the codepen.

const menuToggle = document.querySelector('.menu-toggle');
const menuVi = document.querySelector('.top-nav ul');

menuToggle.addEventListener("click", ()  => {
    let menuClosed = menuVi.classList.contains("hidden");
    console.log(menuVi);
    menuToggle.setAttribute("aria-expanded", menuClosed);
    menuVi.classList.toggle("hidden");
    menuVi.classList.toggle("active");
  
    console.log(menuVi);
});
aleksxor
  • 5,898
  • 15
  • 20
kuipou
  • 1
  • 1
  • Welcome! You can't use [CSS transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) to transitioning `display`. The other way work around is you can transition `opacity` or `visibility`. [Also there is already answered question around this transitioning](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property). – Seno Jun 28 '21 at 04:55

0 Answers0