基于内容动态变化高度的div的webkit-transition高度？答案

【问题标题】：webkit-transition height for a div with a dynamic changing height based on content?基于内容动态变化高度的div的webkit-transition高度？
【发布时间】：2011-09-29 03:10:09
【问题描述】：

请看下面的jsFiddle

http://jsfiddle.net/SgyEW/10/

您可以单击显示不同长度内容的各种按钮，从而导致框变大/缩小。

我希望高度变化是动画的，所以它不是那么跳跃，我尝试通过添加：

-webkit-transition: all 1s linear;

但这在这个用例中没有效果。关于不需要 JavaScript 的解决方案的任何想法？

谢谢

【问题讨论】：

标签： css webkit transitions

【解决方案1】：

恐怕如果没有一些 Javascript 帮助，就无法使用 CSS3 过渡来设置高度动画，请查看：

How can I transition height: 0; to height: auto; using CSS?

Can you use CSS3 to transition from height:0 to the variable height of content?

此外，您的代码从display: none 变为display: block，在任何情况下都不会影响高度。而不是显示无使用height: 0 和overflow: hidden;

【讨论】：

【解决方案2】：

已经 8 年了，但对于那些寻求解决此请求的人来说：

JS Fiddle

CSS

#box {
border: 1px solid gray;
background-color: #f3f3f3;
-webkit-transition: all 1s linear;
}

.content {display:none}

.new_content {
  transition: 1s;
}

$('.toggler').on('click', function() {

var idname = $(this).attr('name');
var content = $('#' + idname).html();
var content_height = $('#' + idname).height();
$('.new_content').html(content).css("height", content_height);

});

另外，还有哪些变化：

您不再使用“display：none”和“display：block”作为您所基于的方法。 您更喜欢使用静态显示 div 的内容替换
内容 div ('.new_content') 没有高度，它是可选的。
JS根据隐藏的div设置高度。
过渡完成了工作。

希望对你有帮助。

【讨论】：

实际上这并不是真正要求的......这不会动态地设置高度，而是直接设置它。如果内容高度发生变化而没有触发高度重新计算（在本例中只是通过调整窗口大小），则会失败。可以使用各种触发器来获取大多数情况，但我猜它的性能并不高……