Question

玉的例子

div.parent
    div.child1
    div.child2

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

当隐藏/取消隐藏时，孩子应该通过身高变化过渡 - 从100％过渡到0％，反之亦然。父母也应通过身高变化过渡以匹配新出现的孩子。

视觉上，child1将显示为＆＃34; roll up＆＃34;虽然child2是＆＃34;向下滚动＆＃34;，父母将根据最终大小延长或收缩。

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

Answer 1

只有在您之前知道孩子的最终身高时才可以这样做。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

基于评论（以及踢腿），您也可以在没有Javascript的情况下进行，但我并不是真的推荐它，因为它不太清楚（JS通常是控制器）：< / p>

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: