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

Question

玉例

div.parent
    div.child1
    div.child2

Child1在加载时是可见的，基于点击，Child1将被隐藏，Child2将被显示。再点击一下就可以逆转。

当隐藏/取消隐藏时，应该通过高度变化来过渡-从100%到0%，反之亦然。父元素也应该通过改变高度来过渡，以匹配新可见的子元素。

从视觉上看，child1看起来是"向上滚动"，而child2是"向下滚动"，根据最终大小，parent将会扩展或收缩。

这可以用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>

你也可以这样做，即使你不知道最终的高度，但它真的太粗糙了，不值得在纯CSS中实现。它与添加一个过渡和X的max-height有关，其中X>>> height。但是当折叠成一个小东西时，它有一个问题，因为有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>