为何<details>内div的CSS opacity过渡效果无法生效？

原生<details>元素切换open状态时，浏览器会直接切换内部内容的显示/隐藏（类似display: none/block），这种瞬时状态切换不会触发CSS过渡——因为元素没有留存从一个样式到另一个的中间渲染过程，所以你的opacity过渡效果没生效。

修复方案 #

调整CSS，通过visibility和max-height配合opacity，让内容始终处于DOM渲染流中，确保过渡能触发：

details {
  padding: 10px;
  border-bottom: 1px solid;
}

details summary {
  cursor: pointer;
  transition: margin 150ms ease-out;
}

details div {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden; /* 防止内容溢出 */
  transition: opacity 1s ease, max-height 1s ease, visibility 1s ease;
  -webkit-transition: opacity 1s ease, max-height 1s ease, visibility 1s ease;
  -moz-transition: opacity 1s ease, max-height 1s ease, visibility 1s ease;
  -ms-transition: opacity 1s ease, max-height 1s ease, visibility 1s ease;
}

details[open] summary {
  margin-bottom: 10px;
}

details[open] div {
  opacity: 1;
  visibility: visible;
  max-height: 200px; /* 根据内容高度调整，或用fit-content（现代浏览器支持） */
}

完整示例代码 #

HTML #

<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>
<details>
  <summary>Question</summary>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.</div>
</details>

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