CSS transition height

Mal wieder was zu CSS und Animationen in Webcontent mit der 'transition' Eigenschaft. Viele stolpern (ja, ich auch ;-) regelmäßig über die Einschränkungen unterstützter Werte. Die Animation eines Elements mit 'height' von '0px' zu 'auto' wäre praktisch, klappt aber nicht. Statt 'auto' brauchen wir einen absoluten Wert. Das klappt nur mit Unterstützung von JavaScript.

Meine Lösung arbeitet  daher mit 'scrollHeight', dessen Wert direkt in den Element  CSS 'style' als 'height' eingetragen wird. Hier mein HTML Quelltext:

<div class="columns is-mobile">

  <div class="column is-1"><a href="#" class="" dwt-click="beeApp.expand" dwt-expand-content="dwt-review-{dwt:view:linecounter}"><span class="icon"><i class="fas fa-angle-down"></i></span></a></div>
  <div class="column is-8">{dwt:event:labelshort:50}</div>
  <div class="column is-3 has-text-right">{dwt:event:begindatum}</div>
</div>
<div class="is-expandable" id="dwt-review-{dwt:view:linecounter}">
  <div class="box" >{dwt:view:tagliste}</div>
</div>

Via 'dwt-click="beeApp.expand"' wird die JavaScript Funktion aufgrufen:

/*
 * expand
 *
**/

beeApp.expand = function(node, e) {

 let expand_content_id = node.getAttribute(BEE_DWT_ATTR_EXPAND_CONTENT);
 let expand_content = document.getElementById(expand_content_id);
 
 if( expand_content ){
 
  if( expand_content.classList.contains(BEE_DWT_CSS_ACTIVE) ){
  
   expand_content.style.removeProperty('height');
   expand_content.classList.remove(BEE_DWT_CSS_ACTIVE);

  } else {
 
   expand_content.style.height = expand_content.scrollHeight + "px";
   expand_content.classList.add(BEE_DWT_CSS_ACTIVE);
   
  }  
 }
 
 return true;

}

Die CSS Kodierung dazu ist dann recht übersichtlich:

.is-expandable {
    height: 0;
    overflow-y: hidden;
    transition: height 0.3s ease;
}

.is-expandable.is-active {
    transition: height 0.3s ease;
}