用于隐藏容器中内容的 CSS 过渡高度

Question

>我有一个div绝对位于屏幕的底部。我想在通过将最大高度转换为 0 来单击同级div 时用动画隐藏其内容(不仅设置显示无(。

问题是内容同时具有保持高度设置的子标签，导致当前正文高度溢出。

解决它的最佳解决方案是什么？

我复制了这种行为：https://codepen.io/javheroli/pen/QWbyZEr?editors=0110

.hide-container{
opacity: 1;
max-height: 4em;
transition: opacity .8s, max-height .5s;
}
.hide {
opacity: 0;
max-height: 0;
transition: opacity .3s, max-height .5s;
}

Answer 1

我认为最简单的方法是仅转换高度属性并添加overflow: hidden定义。

这样，当您降低高度时，内容就会被隐藏。如果还想对内容进行动画处理，则可以对子元素的不透明度进行动画处理。检查您是否提供了HTML结构会更容易。

Answer 2

可以通过向.hide-container .hide元素添加overflow: hidden;来解决此问题。