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 >
            <div  id="hover-color">
                <span  id="about-us-icon">info</span>
                <span >About us</span>
                <span  id="expand-icon">expand_more</span>
            </div>

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

         </div>

    
         <div >
            <div  id="hover-color">
                <span  id="service-icon">build</span>
                <span >Services</span>
                <span  id="expand-icon">expand_more</span>
            </div>

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

         </div>
    
    
         <div >
            <div >
                <span  id="request-service-icon">build_circle</span>
                <span >Request Service</span>
            </div>
         </div>


         <div >
            <div >
                <span  id="contact-icon">markunread</span>
                <span >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.

CodePudding user response：

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