html - 插入其他元素的入口动画 - 仅限 CSS

Question

请看这个 fiddle :

div {
  width:300px;
}
.upper {
  height:50px;
  background-color: red;
}
.middle {
  height: 100px;
  background-color: green;
}

.bottom {
  height: 900px;
  background-color: purple;
}

<div class="upper">

</div>
<div class="middle">

</div>
<div class="bottom">

</div>

我需要一种为绿色元素创建入口的方法:起初，它不出现，然后它出现并在原地生长，并向下推红色元素。

我找到的唯一解决方案是 animate max-height property从 0px 到其他值。然而，这个解决方案并不是最好的，因为它会导致 layout thrashing

所以我需要弄清楚如何用transform 以某种方式做到这一点。

另一个信息 - 绿色元素的高度未知，因此解决方案最好不要对其高度进行硬编码。

Answer 1

一个可能的解决方案是使用transform: scale

transform: scale(height, width);