我能够做到这一点。我有一个.child和一个.parent div。子div完全符合父div的宽度/高度，具有绝对定位。然后设置平移属性的动画，将其Y值降低100%。它的动画非常流畅，没有任何问题或缺点，就像这里的任何其他解决方案一样。

类似这样，伪代码

.parent{ position:relative; overflow:hidden; } 
/** shown state */
.child {
  position:absolute;top:0;:left:0;right:0;bottom:0;
  height: 100%;
  transition: transform @overlay-animation-duration ease-in-out;
  .translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
  .translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}

您可以在.parent上指定一个高度，单位为px，%，或保留为auto。这个div然后在向下滑动时屏蔽掉.child div。

每当DOM发生变化时，为跟踪的元素设置style=“”属性。名为变种转换的插件您可以使用CSS进行转换，而不使用黑客。您不必编写任何JavaScript。只需包含JavaScript库并指定要在HTML中查看的属性。你不必使用固定高度的CSS。使用data mutant attributes=“X”设置要跟踪的元素。

<div data-mutant-attributes="height">                                                                      
    This is an example with mutant-transition                                                                                                          
</div>

这使用MutationObserver跟踪DOM中的更改。您不必设置任何内容或使用JavaScript手动设置动画。更改将自动跟踪。然而，由于它使用了MutationObserver，这只会在IE11+中转换。<IE11将看到快照更改（无过渡）。

小提琴手

演示从高度：自动转换到高度：100%演示过渡高度：添加子对象时自动

使用CSS3过渡设置高度动画的一个视觉解决方法是设置填充动画。

你不太能得到完全的擦除效果，但在过渡持续时间和填充值之间进行切换应该会让你足够接近。如果您不想显式设置高度/最大高度，这应该是您想要的。

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/（从jsFiddle上方的stephband上重复）

您应该改用scaleY。

上一页{背景色：#eee；变换：缩放Y（0）；变换原点：顶部；转变：转变0.26s；}p： 悬停~ul{变换：缩放Y（1）；}<p>将此悬停</p>＜ul＞<li>咖啡</li><li>茶</li><li>牛奶</li></ul>

我在jsfiddle上制作了上述代码的供应商前缀版本，并将jsfiddl更改为使用scaleY而不是height。

编辑有些人不喜欢scaleY如何转换内容。如果这是一个问题，那么我建议使用剪辑。

上一页{剪辑：矩形（自动，自动，0，自动）；位置：绝对；边距：-1rem 0；衬垫：.5rem；颜色：白色；背景色：rgba（0、0、0和0.8）；过渡特性：剪辑；过渡时间：0.5s；过渡时间函数：立方贝塞尔（0.175、0.885、0.32、1.275）；}h3:悬停~ul，h3：活性~ul，ul：悬停{剪辑：矩形（自动，自动，10rem，自动）；}<h3>悬停在此处</h3>＜ul＞<li>此列表</li><li>被剪裁</li><li>剪辑过渡</li><li>将显示它</li></ul><p>一些文本。。。</p>

我想添加一个关于如何扩展/折叠以保持文档流的示例，这个示例适用于使用tailwindcss的React应用程序

export function Collapse({ collapsed = true, children }) {
  return (
    <div className="grid">
      <div className="flex flex-col">
        <div className={`transition-all duration-500 overflow-hidden ${collapsed ? 'basis-0' : 'flex-1'}`}>
          {children}
        </div>
      </div>
    </div>
  );
}

深入阅读：https://stackoverflow.com/a/69871346/9226510

将高度设置为自动并转换最大高度。

在Chrome v17上测试

div {
  position: absolute;
  width:100%;
  bottom:0px;
  left:0px;

  background:#333;
  color: #FFF;

  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.close {
  max-height:0%; /**/
}