html - 在宽度、填充和边框上平滑 CSS 'collapse' 过渡

Question

我正在尝试创建一个过渡，通过更改宽度、填充和边框，它可以有效地“折叠”一个 div 和它包含的 float 元素。

我做了一些调查，你可以在这里看到: http://jsfiddle.net/p38b6ndb/1

包含示例:

HTML:

<div>
    <div class="section">
        <div class="sub-section">label</div>
        <div class="sub-section">field</div>
    </div>
    <div class="section collapsible">
        <div class="sub-section">label</div>
        <div class="sub-section">field</div>
    </div>
    <div class="section">
        <div class="sub-section">label</div>
        <div class="sub-section">field</div>
    </div>    
</div>

CSS:

.section {
    float: left;
    width: 25%;
}

.section.collapsible {
    opacity: 1;
    transition: opacity linear 1s, width linear 1s;
}

.section.collapsible.collapsed {
    width: 0;
    opacity: 0;
}

.sub-section {
    width: 50%;
    float: left;
    height: 42px;
}

场景:第 2 部分应该折叠，第 3 部分与第 1 部分一起向左移动。

问题:如果我在折叠的 div 上有 padding 和/或 border，当宽度达到一定数量时折叠时 div 环绕，导致高度增加，将后续元素向下推。

• 我尝试使用 box-sizing: border-box 但它有一个清晰的包装 效果也一样。
• 我尝试转换 padding 和 border-width 以及 width，但它仍然会换行。我可以尝试不同的 持续时间，但它仍然有一个奇怪的效果。
• 我试图忽略填充和边框，因为它们变得不透明，只是 添加一个margin-left，但这不会影响高度和
  '向下推'。
• 我可以固定高度，但实际上我希望每个高度都是自动的 部分可以包含各种大小的内容。

如何在带有填充/边框元素的 div 上实现折叠过渡？

如果可以通过更新 fiddle 来证明答案，那将是非常受欢迎的。

Answer 1

尝试给每个.collapsed > sub-section-border-box设置'padding: 0'，当然还要设置transition

demo

.section.collapsible .sub-section-border-box {    
    padding: 10px;
    border-width: 2px;
    transition: all linear 1s;
}

.section.collapsible.collapsed .sub-section-border-box{    
    padding: 0;
    border-width: 0;
}