details标签CSS动画表现不一致问题求助

问题现象 #

为<details>元素添加CSS展开动画后，出现动画表现不一致的情况：有时能通过sweep动画平滑展开，有时却直接无动画显示。复现方式为：展开、关闭<details>后等待数秒再触发展开；只有快速连续点击时动画才稳定。当前使用Chrome浏览器。

问题原因 #

1. Chrome浏览器对闲置DOM元素有优化机制，当<details>关闭后闲置一段时间，浏览器可能重置其内容的样式状态，导致再次展开时无法触发动画；
2. 原CSS使用animation仅在[open]状态触发，但浏览器原生<details>的展开行为与动画触发时机不匹配；
3. 内容容器使用position: absolute脱离文档流，影响浏览器对动画状态的跟踪；
4. 原HTML存在多余的闭合标签，导致DOM结构异常，间接影响动画表现。

解决方案 #

核心调整点 #

• 用transition替代animation：基于状态变化触发的过渡更适配<details>的open状态切换，稳定性更高；
• 为内容容器设置初始状态（关闭时的样式），确保动画有明确的起始值；
• 移除不必要的绝对定位，让元素保持在文档流中；
• 修复HTML标签错误，保证DOM结构正常。

修正后的代码 #

CSS

.information {
    font-family: Verdana;
    font-size: 11px;
    text-align: left;
    color: #000;
    width: 332px;
    /* 移除绝对定位，改用相对定位保持布局 */
    position: relative;
    top: 0;
    left: 0;
    /* 设置关闭时的初始状态，与动画终点对应 */
    opacity: 0;
    margin-top: 10px;
    /* 定义过渡动画属性 */
    transition: opacity 0.2s ease-in-out, margin-top 0.2s ease-in-out;
}

.details1 {
    color: #000;
    position: relative; /* 改为相对定位，避免脱离文档流 */
    z-index: 999;
    width: 400px;
}

/* 当details展开时，切换内容的状态触发过渡 */
.details1[open] .information {
    opacity: 1;
    margin-top: 0;
}

HTML

<div class="maindiv" style="position: relative; text-align: center;">
    <details class="details1">
        <summary class="summary1"><span class="ring">◯</span></summary>
        <div class="information">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </div>
    </details>
</div>

补充说明 #

• transition相比animation更适合这种状态切换场景：只要open属性变化，就会自动触发过渡，不会受浏览器闲置优化的影响；
• 保持元素在文档流中：绝对定位元素的样式状态可能被浏览器忽略，导致动画无法正常触发；
• 修复DOM结构错误：多余的闭合标签会导致浏览器解析异常，可能引发各种不可预期的样式或行为问题。

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