如何进行流体盒过渡答案

【问题标题】：How to make a fluid box transition如何进行流体盒过渡
【发布时间】：2014-01-13 05:04:45
【问题描述】：

我希望当您单击单选按钮更改内容时，以及当框更改高度时，有一个流畅的过渡。我尝试过使用过渡属性但不起作用=/

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

谁能帮帮我？

谢谢！

【问题讨论】：

你对自己的代码有什么意见吗？这样我们就可以找出您的代码出了什么问题
jsfiddle.net/FelipeMartinin/URU86/6
哦，那是你的代码！我以为那是一个演示。顺便说一句，它就像魅力一样！它可以根据需要调整高度？
你怎么看，当你选择另一个单选按钮时，内容会改变，好吗？盒子的高度也发生了变化。我想要的是流体高度变化。我尝试使用过渡属性，但不起作用
流体高度变化是什么意思？想要平滑过渡高度？

标签： java jquery html css animation

【解决方案1】：

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

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

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

【讨论】：

对不起，我无法在我的手机中查看它。动画方法采用速度参数。（显示在我粘贴的链接中）只需降低速度

【解决方案2】：

这是如何做到的：

获取要显示的 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;
}

【讨论】：