dropdown animation won’t play in reverse after burger lines toggled again

I’m trying for 12h to get this animation done the right way but i can’t seem to get to the bottom of it.

After I toggle the burger lines, the dropdown menu comes down smoothly but after i click outside , or the burger lines again , it would disappear straight away without playing the animation in reverse.

Can someone tell me what am i doing wrong please

My code can be seen running here https://codepen.io/bunea-andrei/pen/dyJzqzP

I’m talking about the mobile version , whatever is under 980px vw .

Thank you guys any advice is much appreciated

.nav{   
      display: flex;
      flex-direction: column;
      height:fit-content;
      background-color: #27292e;
      width: calc(100vw - 80px); 
      margin-top: 80px;
      border-top: 3px solid #3b5e00;
      align-items: center;
      padding: 5%;
      position: absolute;   
      left:50%;         
      
     
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 0%); 
      
      
    }


@keyframes load {
        0% {height: 0px; padding: 0;}  // padding 0 doesn't seem to work
        100% {height: calc(442px + 10/100*100vw); padding: 5%;}
     }

       .nav-active{
           opacity: 1;
           pointer-events: auto;
           animation: load 1s ease;

           .animation-nav-bar{
            max-height: 442px;
           }
       }


.animation-nav-bar{
    overflow-y: hidden;
    overflow-x: hidden;
    max-height: 0;

    transition: max-height 1s ease;

}

burger.addEventListener(“click”, () => {

    nav.classList.toggle("nav-active");

    //Burger Animation
    burger.classList.toggle("toggle-burger-lines");

   
     
    

    // close the menu on scrolling
    window.addEventListener("scroll", function (event) {
        if (event.target != nav && event.target != burger && event.target.parentNode != burger && event.target.parentNode != nav && burger.classList.contains("toggle-burger-lines")) {
            nav.classList.remove("nav-active");
            burger.classList.toggle("toggle-burger-lines");
        }
    });



    // Click outside to close it 
        window.addEventListener('mouseup', function (event) {
            if (event.target != nav && event.target != burger && event.target.parentNode != burger && event.target.parentNode != nav && burger.classList.contains("toggle-burger-lines") ) {  
                nav.classList.remove("nav-active");
                burger.classList.toggle("toggle-burger-lines");                
            }
        });


    // Tap outside to close it 
    window.addEventListener('touchstart', function (event) {
        if (event.target != nav && event.target != burger && event.target.parentNode != burger && event.target.parentNode != nav && burger.classList.contains("toggle-burger-lines")) {  
            nav.classList.remove("nav-active");
            burger.classList.toggle("toggle-burger-lines");
        }
    });


            
    });

}


        
           
            home
              Home                   
           
        

        <div class="object">
            <div class="a about-us-job c" id="hover-color">
                <span class="material-icons" id="about-us-icon">info</span>
                <span class="menu-text">About us</span>
                <span class="material-icons" id="expand-icon">expand_more</span>
            </div>

            <ul class="about-ul about-about-job"> <!-- about-about-job class is to prevent the dropdown menu from closing when i press the padding of this ul -->
                <li class="about-li FAQ-job"><span class="material-icons" id="FAQ-icon">thumb_up</span>Frequently asked questions</li>
                <li class="about-li about-about-job"><span class="material-icons" id="search-man-icon">person_search</span>About us</li>
            </ul>

         </div>

    
         <div class="object">
            <div class="a service-job d" id="hover-color">
                <span class="material-icons" id="service-icon">build</span>
                <span class="menu-text">Services</span>
                <span class="material-icons" id="expand-icon">expand_more</span>
            </div>

            <ul class="services-ul service-service-job">
                <li class="services-li computer-job"><span class="material-icons" id="computer-icon">dvr</span>Computer Repair</li>
                <li class="services-li laptop-job"><span class="material-icons" id="laptop-icon">computer</span>Laptop Repair</li>
                <li class="services-li web-job"><span class="material-icons" id="web-icon">language</span>Web Design</li>
                <li class="services-li graphic-job"><span class="material-icons" id="graphic-icon">graphic_eq</span>Graphic Design</li>
            </ul>

         </div>
    
    
         <div class="object">
            <div class="a request-service-job e">
                <span class="material-icons" id="request-service-icon">build_circle</span>
                <span class="menu-text">Request Service</span>
            </div>
         </div>


         <div class="object">
            <div class="a contact-job f">
                <span class="material-icons" id="contact-icon">markunread</span>
                <span class="phone-edit menu-text">Contact</span>
            </div>
         </div>

the nav.classList.remove(“nav-active”); seems to only set the opacity back to 0 without playing the animation backwords .

I think i’m missing a transition in the right spot but that might not be what’s wrong.

Answer

Your problem is with the .nav opacity, when you toggle the class it goes to 0 and the menu disappears

Advertisement

Answer