transitionrun for max-height

by EoghanM

HTML

<div class="drawer">
  <ul>
    <li>Zebra</li>
    <li>Lion</li>
    <li>Koala</li>
    <li>Parakeet</li>
    <li>Oryx</li>
    <li>Rhino</li>
    <li>Antelope</li>
  </ul>
</div>

CSS

.drawer {
  max-height: 10000em;
  overflow: hidden;
  transition: max-height .3s ease-in-out, height .3s ease-in-out;
  transition-delay: 0.001s;
}

.drawer.closed {
  max-height: 0 !important;
}
.drawer.closed[max-height-locked] {  
  height: 0 !important;
}

.drawer.closed li {
  color: red;
}
}

JavaScript

setInterval(function() {
  document.getElementsByClassName('drawer')[0].classList.toggle('closed');
}, 2000);

document.addEventListener('transitionrun', function(e) {
  if (e.propertyName == 'max-height') {
    if (e.target.style.height === '') {
      e.target.style.height =
        Math.round(e.target.getBoundingClientRect().height) + 'px';
      void e.target.offsetWidth;   
      e.target.setAttribute('max-height-locked', true)
    }
  }
});

document.addEventListener('transitionend', function(e) {
  if (e.propertyName == 'max-height') {
    if (Math.round(e.target.getBoundingClientRect().height) + 'px' == e.target.style.height) {
      e.target.style.height = '';
      e.target.removeAttribute('max-height-locked')
    }
  }
});