Question

我希望当您单击单选按钮以更改内容时，当框更改高度时，请进行流畅的转换。我尝试过转换属性但不起作用= /

.main-form-show {
     background: #fff;
     padding: 20px;
     max-width: 500px;
     margin: auto;
     border-radius: 10px;
     margin-top: 250px;
     transition: 1s;
    }

任何人都可以帮助我吗？

谢谢！

Answer 1

以下是如何做到的：

获取要显示的div的高度（当它仍然是隐藏）。
将要显示的div的高度设置为当前显示的div的高度。
隐藏当前显示的div。
显示新div。
将新div的高度设置为实际应该的高度（这是在第一步中获得的）。

我不相信所有浏览器都支持获取隐藏div的高度，因此以下代码是一种解决方法：

$div.css({ position: 'absolute', visibility: 'hidden', display: 'block' });
var height = $div.height();
$div.css({ position: 'static', visibility: 'visible', display: 'none' });

jsfiddle

我必须使用html和css调整两件事：

（1）我为'form-show-item-3'添加了一个空div，因此每个单选按钮都会有一个div。否则，代码必须更复杂。

（2）我添加了以下样式。否则，内容div中<p>元素的边距延伸到div之外，高度在动画结束时跳跃。

div.dinamic-form-content {
    padding: 1px;
}

Answer 2

使用jQuery的animate方法进行平滑过渡。

$("main-form-show").animate({
     //you code here
});

http://www.w3schools.com/jquery/jquery_animate.asp

如何使流体箱过渡

2 个答案: