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

Question

请看下面的jsFiddle

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

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

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

-webkit-transition: all 1s linear;

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

谢谢

Answer 1

如果没有一些 Javascript 帮助，恐怕没有办法用 CSS3 过渡动画高度，请查看：

我怎样才能过渡高度：0；到高度：自动；使用 CSS？

你可以使用 CSS3 从 height:0 过渡到内容的可变高度吗？

此外，您的代码从display: noneto 开始display: block，在任何情况下都不会影响高度。而不是 display none 使用height: 0withoverflow: hidden;

Answer 2

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

JS小提琴

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 设置高度。
• 过渡完成了工作。

希望能帮助到你。