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

Question

请参阅以下jsFiddle

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

您可以单击显示不同长度内容的各种按钮，这会导致框增长/缩小。

我想要将高度变化设置为动画，因此它不是那么跳跃，我尝试添加：

-webkit-transition: all 1s linear;

但这对此用例没有影响。关于不需要JavaScript的解决方案的任何想法？

由于

Answer 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，在任何情况下都不会对高度产生影响。而不是显示没有使用高度：0溢出：隐藏;

Answer 2

已经8年了，但是对于那些寻求解决方案的人来说

这是我的JS小提琴

http://jsfiddle.net/0vLmq97j/1/

CSS

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

.content {display:none}

.new_content {
  transition: 1s;
}

JS

$('.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设置高度。
-过渡完成了任务。

希望有帮助。