Multiline container unfolding animation - html

Question

How should CSS multiline container (e.g. content block or alert) unfolding animation should be managed?
http://plnkr.co/edit/Qq5fzeb3GBengviVNimC?p=preview
.alert {
background: turquoise;
color: white;
padding: 10px;
overflow: hidden;
opacity: 0;
max-height: 0;
}
body:hover .alert {
display: block !important;
opacity: 1;
-webkit-transition: 2s;
-moz-transition: 2s;
-ms-transition: 2s;
transition: 2s;
max-height: 100px;
}
The problem here is 'multiline', as you can see, the block height isn't a fixed value.
<div class="alert">Alert!<br>Alert!<br>Alert!</div>
While max-height: 100px is near real block height, it works fine. If max-height is smaller, the animation would be jaggy in the end, and max-height: 9999px will make the transition too fast.
Can this be done without calculating the exact height in JS?

Answer 1

Calculating the height can be done in jQuery indeed, I did the following to solve your problem:
$("#out").html("Block height: " + $("#alert").height());
//solely for demonstration, you can delete this line
$("#alert").css('height','0px');
$('#alert').mouseover( function(){
$("#alert").css('height', '58px');
});
$('#alert').mouseout( function(){
$("#alert").css('height', '0px');
});
#alert {
background: turquoise;
color: white;
padding: 10px;
overflow: hidden;
opacity: 0;
//max-height: 0; this causes .height() to always display '0' so delete this here, and set this via jQuery
}
body:hover #alert {
display: block !important;
opacity: 1;
-webkit-transition: 2s;
-moz-transition: 2s;
-ms-transition: 2s;
transition: 2s;
// max-height: 100px !important; set this via jQuery
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Hello!</p>
<div id="alert">Alert!<br>Alert!<br>Alert!</div>
<p>Hello again!</p>
<span id="out"></span>