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

这里的问题是多线＆＃39;，如您所见，块高度不是固定值。

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

虽然max-height: 100px接近实际块高，但它工作正常。如果max-height较小，则动画最终会变得锯齿状，而max-height: 9999px会使转换过快。

这可以在不计算JS的确切高度的情况下完成吗？

Answer 1

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

＆＃13;

$("#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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

多行容器展开动画

1 个答案: