宽度、内边距和边框的平滑 CSS“折叠”过渡答案

【问题标题】：Smooth CSS 'collapse' transition on width, padding and border宽度、内边距和边框的平滑 CSS“折叠”过渡
【发布时间】：2015-01-19 20:20:51
【问题描述】：

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

我做了一些调查，你可以在这里看到： 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;
}

场景：第二部分应该折叠，第三部分与第一部分一起向左移动。

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

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

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

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

【问题讨论】：

为什么不将字体大小也转换为 0？ - jsfiddle.net/p38b6ndb/2
好主意，这很有效，不会导致内容被向下推。

标签： html css css-transitions

【解决方案1】：

尝试为每个 .collapsed > sub-section-border-box 设置 'padding: 0'，当然还要设置一个过渡

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;
}

【讨论】：

所以基于演示中的 3 个示例，这是 'sub-section-border-box' 版本与过渡到 padding:0 和border-width:0 的组合子节填充'版本。这肯定更好，因为它不会将内容向下推，但是像这样高度缩小的内容意味着它甚至可能比直接过渡的“子部分边框”版本更不受欢迎。

【解决方案2】：

到目前为止，我发现的最佳解决方案是将填充和边框宽度转换为 0，但仅适用于左右，而不适用于顶部和底部。这样，折叠似乎只在宽度上，div 根本不会改变高度。

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

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

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

.section.collapsible.collapsed .sub-section {    
    padding: 10px 0;
    border-width: 2px 0;
}

演示：http://jsfiddle.net/p38b6ndb/6/

这也意味着我仍然可以使用box-sizing: border-box。

【讨论】：