Transitions on the CSS height property toggles inconsistently

by Ty_Pot   Last Updated May 22, 2020 23:26 PM - source

I have a vertical nav bar that displays a dropdown containers for hidden content. The containers are hidden using max-height: 0px. I have JS that transitions between max-height: 5000px and max-height: 0px depending on a conditional statement which checks the current value. All of these hidden containers have disparate sizes. So I'm having to apply a max-height larger than what I will need to catch all of these use cases. However, in doing that, it causes the transition property to perform inconsistently when moving from max-height: 5000px to max-height: 0px (delay cause by transition moving from 5000px to actual height). Is there a better way of achieving the same affect that allows for a more natural/consistent transition?

var dropdown = document.getElementsByClassName("dropdown-btn");
      var i;

      for (i = 0; i < dropdown.length; i++) {
        dropdown[i].addEventListener("click", function() {
          this.classList.toggle("active");
          var dropdownContent = this.nextElementSibling;
          if (dropdownContent.style.maxHeight === "5000px") {
            dropdownContent.style.maxHeight = "0px";
          } else {
            dropdownContent.style.maxHeight = "5000px";
          }
        });
      }
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: #F6F5F8;
  }
  
header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  nav {
    display: flex;
    flex-direction: column;
    justify-content: flext-start;
    height: 100%;
    width: 14.5em;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #2C3039;
    overflow-x: hidden;
    padding-top: .75em;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    align-items: center;
  }

  #logo-pic {
    height: 2.4em;
    width: 2.4em;
    filter: contrast(100%);
  }

  #logo-font {
    color: #f6f5f8;
    font-family: 'Maven Pro', sans-serif;
    font-size: 25px;
    margin-top: .15em;
    margin-left: .4em;
  }

  .nav-logo-app-container {
    text-decoration: none;
    position: relative;
    display: flex;
  }

  #profile-pic {
    height: 3em;
    width: 3em;
    border-radius: 50%;
    filter: contrast(85%);
    border:3.5px solid white;
  }

  .profile-info {
      padding-top: 2em;
      display: flex;
      justify-content: flex-start;
      align-self: flex-start;
      padding-left: 1em;
  }

  .profile-greeting {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      color: #cdcad2;
      font-size: 12px;
      padding-left: 1.8em;
      padding-bottom: .3em;
      font-weight: 300;
  }

  #username {
      margin: .75em 0em 0em 0em;
      color: white;
      font-weight: 300;
  }

  .sidebar-menu {
    margin-top: 1em;
    align-self: flex-start;
    width: 100%;
    font-size: 14px;
  }

  #sidebar-head {
    padding-left: 2.1em;
    color: white;
    font-size: 12.5px;
    margin-bottom: .6em;
  }

  .sidebar-menu a, .dropdown-btn {
    text-decoration: none;
    color: #f6f5f8;
    display: block;
    border: none;
    background: none;
    width:100%;
    cursor: pointer;
    outline: none;
    text-align: left;
  }

  .dropdown-btn {
    height: 3em;
    text-align: left;
    padding-left: 1.25em;
    margin-bottom: .5em;
  }

  .fa-chevron-down {
    padding-right: 1em;
  }

  .active {
    border-top: 1px solid #635f5f;
    border-bottom: 1px solid #1d1d1d;
    color: white;
    background-color: #373c46;
  }

  .dropdown-container {
    padding-left: 8px;
    transition: max-height 1s ease-in-out;
    max-height: 0px;
    overflow: hidden;
  }

  .fa-chevron-down {
    float: right;
    font-size: 10px;
    padding-top: .35em;
  }

  .dropdown-btn-icon {
    font-size: 15px;
    display: inline;
    margin-right: 1em;
  }
<nav>
  <a class="nav-logo-app-container" href="/">
    <img id="logo-pic" src="/images/sbux-logo.png"/>
    <div id="logo-font">Test</div>
  </a>
    <div class="profile-info">
      <img id="profile-pic" src="/images/professional_pic.jpg" />
        <div class="profile-greeting">
          <span>Welcome,</span>
          <h3 id="username">John Smith</h3>
        </div>
    </div>
    <div class="sidebar-menu">
        <h3 id="sidebar-head">GENERAL</h3>
        <button class="dropdown-btn">
          <div class="dropdown-btn-icon"><i class="fas fa-home"></i></div>Home<i class="fas fa-chevron-down"></i>
        </button>
        <div class="dropdown-container"><a href="#">Home1</a><a href="#">Home2</a><a href="#">Home3</a></div>
        <button class="dropdown-btn">
          <div class="dropdown-btn-icon"><i class="fas fa-users"></i></div>Sourcing<i class="fas fa-chevron-down"></i>
        </button>
        <div class="dropdown-container"><a href="#">Other1</a><a href="#">Other2</a><a href="#">Other3</a></div>
    </div>
</nav>



Related Questions



Table cells deform after entering input fields

Updated December 11, 2017 00:26 AM

Fail to auto submit hidden form with setTimeout

Updated June 28, 2018 22:26 PM

Preventing HTML and Script injections in Javascript

Updated January 30, 2017 14:11 PM