css转换高度,以将内容隐藏在容器中

问题描述 投票:0回答:2

我的div绝对位置位于屏幕的底部。当通过将max-height转换为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;
}

我的div绝对位置位于屏幕的底部。当通过转换...

javascript html css css-transitions
2个回答
0
投票

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


0
投票

可以通过在overflow: hidden;元素中添加.hide-container .hide来解决。

热门问题
推荐问题
最新问题