时间戳

首页 > 解决方案 > css过渡高度隐藏容器中的内容

javascript - css过渡高度隐藏容器中的内容

问题描述

我有一个 div absolute 位于屏幕的底部。当通过将 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;
}

标签： javascripthtmlcsscss-transitions

解决方案

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

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

推荐阅读