details标签不支持transform缩放动画，因open切换不触发重排；CSS变量不可过渡，需JS控制class切换配合CSS变量配置缩放值与持续时间，并同步opacity避免闪烁，禁用max-height混用以确保动画一致性。
details 标签本身不支持 transform 缩放动画
直接对 <details> 或其内容区加 transform: scale() 并绑定 details[open] 选择器，不会产生“随展开过程渐进缩放”的效果——因为原生 open 切换不触发重排，transform 不会插值过渡；它只在状态切换完成瞬间应用，看起来就是“啪一下放大”，没有中间帧。
CSS 变量无法单独驱动缩放过渡
你可以在 :root 或 details 上定义 --scale: 0.9，再用 transform: scale(var(--scale))，但问题在于：CSS 变量本身不可动画，transition: --scale 0.3s 是无效语法（浏览器不支持变量过渡）。所以必须靠 JS 动态写入内联 style 或切换 class 来触发。
用 JS + CSS 变量 + transition 实现“展开时内容从 0.8x 缩放到 1x”
核心思路是：把缩放值交给 JS 控制，用 class 触发 transition，CSS 变量仅作配置占位（比如统一管理缩放起始值、持续时间），避免硬编码。
- 给内容区（
<details>下第一个非<summary>元素）设transform-origin: top left和transition: transform 0.3s ease-out - 初始状态加
class="collapsed"，对应.collapsed { transform: scale(0.8); opacity: 0.7; } - 监听
toggle事件，在details.open === true时移除collapsed，否则加上 - 把
0.8和0.3s抽成 CSS 变量，例如：details { --collapse-scale: 0.8; --expand-duration: 0.3s; }，然后在 CSS 中用transform: scale(var(--collapse-scale)); transition: transform var(--expand-duration) ease-out; - 注意：
opacity要同步控制，否则缩放过程中文字边缘可能因亚像素渲染出现闪烁
details summary + * {
transform-origin: top left;
transition: transform var(--expand-duration, 0.3s) ease-out,
opacity var(--expand-duration, 0.3s) ease-out;
}
details:not([open]) summary + * {
transform: scale(var(--collapse-scale, 0.8));
opacity: 0.7;
}缩放动画和 height/max-height 动画不能混用
如果你同时用了 max-height 过渡（常见于平滑展开），再叠加 transform: scale()，会出现两个动画节奏不一致的问题：高度过渡快，缩放慢，视觉上像“内容先弹出来、再慢慢变大”。更糟的是，Safari 对 transform + max-height 同时过渡的重排处理不稳定，容易卡顿或跳帧。
立即学习“前端免费学习笔记（深入）”；
真正想做动态缩放，就放弃 max-height 方案，专注用 transform + opacity 控制内容区，把“展开”语义交给 details[open] 状态，把“动画表现”完全交给 transform。别指望一个标签扛起两套动画逻辑。
