max-height属性过渡出现不必要延迟的原因及解决方法

实现代码 #

CSS代码 #

* {
  background-color: black;
  color: white;
  --transition-time: 5s;
}
.collapsible-container {
  --show-more-text: "Show more";
}
.collapsible-container > label::after {
  content: var(--show-more-text);
}
.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height var(--transition-time) linear;
}
.collapsible-container > input:checked + label + .collapsible-content {
  transition: max-height var(--transition-time) linear;
  max-height: 100vh;
}

HTML代码 #

<div class="collapsible-container" style="border: 2px solid white;">
  <input type="checkbox" value="" name="show more" id="collapsible"/>
  <label for="collapsible"></label>
  <div class="collapsible-content">
    <h1>Collapsible content</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
<div>
  <h1>Text that follows</h1>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

问题现象 #

这个可展开容器功能基本能用，但过渡动画有异常：在Stack Overflow的代码片段里表现正常，但在浏览器中完全展开后，点击折叠会有明显延迟才开始收缩。

问题成因 #

核心问题出在展开状态设置的max-height: 100vh上：

• 展开时给容器设置了100vh的最大高度，但实际内容的高度远低于这个值。CSS过渡是严格按照数值变化时长执行的——它会从100vh逐步降到0，而不是从内容实际高度降到0。
• 比如内容实际只有200px高，浏览器视口是900px，那过渡要完成从900px到0的变化，前700px的过程中容器已经完全折叠看不见内容了，但动画还在后台运行，视觉上就表现为折叠开始前有明显延迟。
• Stack Overflow的代码框本身高度有限，100vh和内容实际高度差距很小，所以延迟不明显。

解决方法 #

方法一：设置接近内容实际高度的max-height值 #

如果能提前预估内容的最大高度，直接把展开状态的max-height改成这个数值即可：

.collapsible-container > input:checked + label + .collapsible-content {
  transition: max-height var(--transition-time) linear;
  max-height: 300px; /* 改为和内容实际高度接近的数值 */
}

优点是操作简单，缺点是如果内容高度动态变化（比如加载新内容），需要手动调整数值。

方法二：用JavaScript动态计算内容高度 #

通过JS获取内容的实际高度，再将这个高度设为展开状态的max-height：

const content = document.querySelector('.collapsible-content');
const actualHeight = content.scrollHeight;
content.style.setProperty('--actual-content-height', `${actualHeight}px`);

然后修改CSS：

.collapsible-container > input:checked + label + .collapsible-content {
  transition: max-height var(--transition-time) linear;
  max-height: var(--actual-content-height);
}

如果内容是动态变化的，还需要监听内容更新事件，重新计算高度。

方法三：用CSS Grid替代max-height过渡 #

换一种实现思路，用CSS Grid的grid-template-rows实现折叠展开，完全不需要关心内容高度：

.collapsible-content {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr; /* 初始折叠状态 */
  transition: grid-template-rows var(--transition-time) linear;
}
.collapsible-container > input:checked + label + .collapsible-content {
  grid-template-rows: 1fr; /* 展开状态，自适应内容实际高度 */
}
/* 确保内部元素能自适应容器高度 */
.collapsible-content > * {
  min-height: 0;
}

这种方法不需要预估高度，过渡基于内容实际高度变化，不会出现延迟问题，是比较推荐的方案。

内容的提问来源于stack exchange，提问作者Enlico