多行容器展开动画

Question

应该如何管理 CSS 多行容器（例如内容块或警报）展开动画？

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;
}

这里的问题是'多行'，正如你所看到的，块高度不是一个固定值。

<div class="alert">Alert!<br>Alert!<br>Alert!</div>

虽然max-height: 100px 接近实际块高度，但它工作正常。如果max-height 较小，动画最后会出现锯齿，max-height: 9999px 会使过渡过快。

在 JS 中不计算精确高度可以做到吗？

Answer 1

计算高度确实可以在jQuery中完成，我做了以下来解决你的问题：

$("#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>