如何用纯CSS实现<details>元素关闭时的平滑过渡效果？

问题根源在于直接控制<details>的height时，关闭浏览器会先移除open属性，同时瞬间隐藏summary之外的内容，导致height过渡时已经看不到文本。通过调整结构和CSS逻辑可以解决：

修改后的HTML结构 #

把隐藏内容包裹在单独容器中，避免浏览器默认的内容隐藏行为干扰过渡：

<details>
  <summary>summary</summary>
  <div class="content">some
  hidden
  text</div>
</details>

对应的CSS代码 #

通过控制内容容器的max-height实现过渡，而非直接修改<details>的height：

details {
  border: 1px solid;
  overflow: hidden;
}

summary {
  cursor: pointer;
  padding: 0.5em;
}

/* 默认状态：内容容器高度为0，隐藏内容 */
.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0 0.5em;
}

/* 打开状态：展开内容容器，设置足够大的max-height容纳内容 */
details[open] .content {
  max-height: 200px; /* 根据实际内容高度调整，确保大于内容真实高度 */
  transition: max-height 0.3s ease-in;
  padding: 0.5em;
}

原理说明 #

• 将内容独立成容器后，open属性切换时，内容不会被浏览器瞬间隐藏，而是通过max-height的过渡动画逐渐收缩/展开。
• max-height设置为大于内容实际高度的值，既能保证内容完全显示，又能让过渡效果自然完成。

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