CSS 转换父级以匹配子级的最终高度

Question

玉例子

div.parent
    div.child1
    div.child2

Child1 在加载时可见，基于单击，Child1 将变为隐藏，而 Child2 将变为可见。再次点击可以扭转这种情况。

当隐藏/取消隐藏时，孩子应该通过高度变化进行转换 - 从 100% 到 0%，反之亦然。 父级也应该通过改变高度来匹配新可见的子级。

从视觉上看，child1 会在 child2“向下滚动”时“向上滚动”，父级将根据最终大小进行扩展或收缩。

这可以通过 CSS 过渡来完成吗？

Answer 1

只有在您事先知道孩子的最终身高时才能这样做。

var button = document.querySelector('button');
var parent = document.querySelector('.parent');

button.onclick = function(){
  parent.classList.toggle('toggle');
}

.child1,
.child2 {
  height: 100px;
  background: #faa;
  overflow: hidden;
  transition: all .3s;
}

.child2 {
  background: #aff;
  height: 0;
}

.toggle .child1 {
  height: 0;
}

.toggle .child2 {
  height: 100px;
}

<div class="parent">
  <div class="child1">Something here</div>
  <div class="child2">Or here</div>
</div>
<button>Click me</button>

即使您不知道最终高度也可以这样做，但它实在是太 hacky 了，不值得在纯 CSS 中实现。它与添加过渡和 X 的最大高度有关，其中 X >>> 高度。但折叠成小东西时会出现问题，因为 100 * (X - height) % 的时间会导致延迟。

基于 cmets（和踢球），你也可以不使用 Javascript，但我不太推荐它，因为它不是很清楚（JS 通常是控制器）：

.child1,
.child2 {
  height: 100px;
  background: #faa;
  overflow: hidden;
  transition: all .3s;
  cursor: pointer;
}

.child2 {
  background: #aff;
  height: 0;
}

.toggle {
  display: none;
}

:checked ~ .child1 {
  height: 0;
}

:checked ~ .child2 {
  height: 100px;
}

<label>
  <input class="toggle" type="checkbox" name="el" />
  <div class="child1">Click me</div>
  <div class="child2">Now me</div>
</label>