JSFiddle - React, Tailwind, and code Playground

https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css

by EoghanM

HTML

The "slideDown" animation is with scaleY transform, with height matched to scale.
<hr />
<div id="parent0">
    <h1>Hover me (scaleY)</h1>
    <div id="child0">
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
    </div>
    <div>some other content</div>
    
    </div>
</div>
<div id="parent1">
    <h1>Hover me (rotate)</h1>
    <div id="child1">
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
    </div>
    <div>some other content</div>
    
    </div>
</div>

CSS

body { padding: 100px; }

#child0 {
	transform: scaleY(0);
	transform-origin: top;
	background-color: #dedede;
	transition: transform 1s ease;
}

#parent0:hover #child0 {
	transform: scaleY(1);
}

#parent1 {
  perspective: 3000px;
}
#child1 {
	transform: rotateX(-90deg);
  backface-visibility: hidden;
	transform-origin: top;
	background-color: #dedede;
	transition: transform 1s ease;
}


#parent1:hover #child1 {
	transform: rotateX(0deg);
}

h1 {
	font-weight: bold;
}

JavaScript

function sync_height_to_transform(el, duration) {
  var h = parseInt(getComputedStyle(el)['height']);
  var start_ts = false;
  function do_sync_height_to_transform(ts) {
    if (start_ts === false) {
      	start_ts = ts;
    }
    el.style.marginBottom = (el.getBoundingClientRect().height - h) + 'px';
    if (duration === undefined || ts - start_ts < duration) {
        requestAnimationFrame(do_sync_height_to_transform);
    }
  }
  requestAnimationFrame(do_sync_height_to_transform);
}
var duration = undefined;  // this will run it forever.  Instead change to duration of transition if effect is triggered by javascript

// WARNING: this will degrade general background performance of the page when not triggered for a fixed duration
sync_height_to_transform(document.getElementById('child0'), duration);
sync_height_to_transform(document.getElementById('child1'), duration);