This menu's unfolding animation is smooth, but not its collapsing animation. How can I fix this?

Issue

I have a mobile menu element and I'm trying to make it run smoothly. It's unfolding upwards and collapsing downwards. The issue that I'm having is that no matter what I try, the transition on collapse isn't smooth at all, despite the unfolding animation happening pretty smoothly.

const mobileMenuTrigger = document.querySelector('.mobile-menu__trigger');

const onMobileTriggerClick = (e) => {
  //console.log(e.currentTarget.closest('.mobile-menu'));
  e.currentTarget.closest('.mobile-menu').classList.toggle('is-open');
}

mobileMenuTrigger.addEventListener('click', onMobileTriggerClick);

/* Automatically Converted from SCSS */

.mobile-menu {
  width: 100%;
  position: fixed;
  overflow-y: hidden;
  bottom: 0;
  left: 0;
}

.mobile-menu * {
  transition: all 0.2s ease-in;
}

.mobile-menu .mobile-menu__trigger {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.mobile-menu .mobile-menu__icon {
  height: 90%;
}

.mobile-menu .mobile-menu__wrapper {
  position: absolute;
  width: 100%;
  bottom: 40px;
  height: 0;
}

.mobile-menu .mobile-menu__items {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mobile-menu.is-open {
  overflow-y: visible;
}

.mobile-menu.is-open .mobile-menu__icon {
  transform: rotate(180deg);
}

.mobile-menu.is-open .mobile-menu__wrapper {
  height: 40vh;
}


/*

Original SCSS

.mobile-menu {
  width: 100%;
  position: fixed;
  overflow-y: hidden;
  bottom: 0;
  left: 0;

  * {
    transition: all .2s ease-in;
  }

  .mobile-menu__trigger {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  .mobile-menu__icon {
    height: 90%;
  }

  .mobile-menu__wrapper {
    position: absolute;
    width: 100%;
    bottom: 40px;
    height: 0;
  }

  .mobile-menu__items {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  &.is-open {
    overflow-y: visible;

    .mobile-menu__icon {
      transform: rotate(180deg);
    }

    .mobile-menu__wrapper {
      height: 40vh;
    }
  }
}

*/

<footer class="footer">
  <div class="mobile-menu">
    <div class="mobile-menu__wrapper">
      <ul class="mobile-menu__items">
        <li class="mobile-menu__item">Item 1</li>
        <li class="mobile-menu__item">Item 2</li>
        <li class="mobile-menu__item">Item 3</li>
        <li class="mobile-menu__item">Item 4</li>
      </ul>
    </div>
    <button class="mobile-menu__trigger">
        <img src="./assets/icons/chevron-up.svg" alt="" class="mobile-menu__icon">
      </button>
  </div>
</footer>

Solution

you can delete overflow-y: hidden attribute in .mobile-menu. the transition property cant't affect the hidden/visible attribute. it will trigger immediately

Answered By - user14937663