CSS 转换 parent 以匹配孩子的最终身高

Question

玉例

div.parent
    div.child1
    div.child2

Child1 在加载时可见，基于点击，Child1 将隐藏，Child2 将变为可见。再点击一次可以反转。

隐藏时/un-hiding children 应通过高度变化进行过渡 - 从 100% 到 0%，反之亦然。 parent 也应通过高度变化进行过渡以匹配新可见的 child。

视觉上 child1 将出现在 "roll up" 而 child2 是 "rolling down"，parent 将根据最终大小扩展或收缩。

这可以用 CSS 转换来完成吗？

Answer 1

只有您事先知道 children 的最终高度才能完成。

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>

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

根据评论（以及踢球），你也可以不用 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>

CSS 转换 parent 以匹配孩子的最终身高

CSS transitions parent to match a childs final height

html

css

css-transitions

css-animations