CSS ::details-content 怎样给 details 折叠内容添加过渡

先说结论：把过渡写在 details::details-content 上，用 opacity 控制淡入淡出，再给 content-visibility 加上 allow-discrete，就能让原生折叠内容在打开和关闭时都保持可见到过渡结束。

官方地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::details-content

这套写法保留了 details 和 summary 的键盘操作与语义，不需要为折叠状态重新写一套 JavaScript。需要注意的是，::details-content 是较新的 CSS 伪元素，旧浏览器会忽略相关规则，但原生 details 仍然可以正常展开。

::details-content 到底选中了什么

summary 是始终可见的标题和操作入口；details 里紧跟在它后面的其他内容才是可折叠区域。::details-content 代表的正是这一块内容，因此可以只给正文做淡入淡出，不会让标题一起变透明。

查看说明
这段内容会随着 details 的 open 状态显示或隐藏。

用 opacity 和 content-visibility 做平滑展开收起

只写 opacity 还不够：收起时浏览器可能立即把内容设为不可见，淡出过程就看不到了。把 content-visibility 放进同一条过渡，并使用 allow-discrete，可以让内容在离散状态切换期间继续参与淡出。

/* 先只选中 details 的可折叠内容，不影响 summary */
details::details-content {
  opacity: 0;
  /* 离散的可见性切换也参与这段过渡 */
  transition:
    opacity 360ms ease,
    content-visibility 360ms allow-discrete;
}

/* open 存在时，内容淡入到完全可见 */
details[open]::details-content {
  opacity: 1;
}

这里的 [open] 是布尔属性选择器：属性存在就表示展开，不要写成 open="false"，因为布尔属性只要存在仍然代表打开。若页面还要兼容不认识该伪元素的浏览器，浏览器只会忽略这两条增强规则，保留原生的瞬时展开。

用特性查询和动效偏好处理兼容性

如果项目需要把增强样式和普通样式明确隔离，可以用选择器特性查询。支持伪元素的浏览器进入增强分支，不支持的浏览器只使用原生 details；用户偏好减少动效时则直接关闭过渡。

/* 不支持 ::details-content 时，这个分支不会生效 */
@supports selector(details::details-content) {
  details::details-content {
    opacity: 0;
    transition:
      opacity 360ms ease,
      content-visibility 360ms allow-discrete;
  }

  details[open]::details-content {
    opacity: 1;
  }
}

/* 尊重用户的减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  details::details-content {
    transition: none;
  }
}

这里没有把内容强行设置为 display: none，也没有用脚本阻止 summary 的默认行为。这样做的好处是：新能力负责视觉增强，HTML 原生结构负责交互和语义，降级路径比较清楚。

看到不生效时先排查这三处

1. 完全没有淡入淡出：先确认当前浏览器是否支持 ::details-content，不支持时出现瞬时展开是预期降级。
2. 打开有效、关闭像闪现：检查 content-visibility 360ms allow-discrete 是否和 opacity 写在同一条 transition 中。
3. 标题也变透明：说明选择器写成了 details 或包住 summary 的公共容器，应改回 details::details-content。

如果只需要淡入淡出，这个方案已经足够；若还要做高度展开动画，应另行评估布局尺寸动画和浏览器兼容性，不要把高度变化问题混同为 ::details-content 的选中范围问题。

相关问题

问：为什么不直接给 details 设置 opacity？
答：那会连 summary 一起影响，用户可能看不到可操作的标题。伪元素能把可折叠内容单独分出来。

问：旧浏览器会不会因此不能展开 details？
答：不会。未知 CSS 选择器规则会被忽略，HTML 的 details/summary 原生交互仍然存在。

问：为什么一定要写 allow-discrete？
答：content-visibility 属于离散切换，不加这个过渡行为声明时，收起可能立刻隐藏内容，淡出过程就看不见。