仅用CSS和HTML实现<details>标签高度动画的问题排查

尝试仅用CSS为<details>标签实现高度动画，通过[open]选择器将子div的grid-template-rows从0fr切换为1fr，但动画表现不稳定：打开时有时正常有时失效，关闭时完全无动画。请问异常原因是什么？能否仅用CSS和HTML修复？

原实现代码 #

CSS #

details {
  font-family: arial;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background-color: lightgray;
  border-radius: 3px;
  appearance: none;
}

summary {
  user-select: none;
  padding: 1em;
  cursor: pointer;
}

div {
  display: grid;
  transition: grid-template-rows 250ms;
}

details:not([open]) div {
  grid-template-rows: 0fr;
}

details[open] div {
  grid-template-rows: 1fr;
}

article {
  overflow: hidden;
  padding: 0 1em;
}

HTML #

<body>
  <details>
    <summary>Lorem Ipsum</summary>
    <div>
      <article>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat..."
        </p>
        <p>
          "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..."
        </p>
        <p>
          "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda..."
        </p>
      </article>
    </div>
  </details>
</body>

• 原生<details>行为干扰：<details>是浏览器原生交互式元素，切换open属性时，浏览器会直接触发内容的显示/隐藏逻辑，这个原生操作的优先级高于CSS过渡，可能直接覆盖动画效果，尤其是关闭时，浏览器可能直接将内容设为display: none，完全阻断过渡。
• grid-template-rows过渡的兼容性问题：虽然CSS标准支持grid-template-rows的过渡，但0fr到1fr的相对单位转换，部分浏览器无法稳定计算过渡的起始/结束状态，导致动画触发不稳定。
• 缺乏明确的布局基准：设置grid-template-rows: 0fr时，容器高度被压缩为0，但未给内容容器设置min-height，浏览器无法准确识别可过渡的布局空间，容易出现动画失效。

核心思路是规避原生<details>的强制显示/隐藏逻辑，通过明确的布局基准稳定过渡效果，同时保留原生open属性的交互触发能力。

修改后的代码 #

CSS #

details {
  font-family: arial;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background-color: lightgray;
  border-radius: 3px;
  appearance: none;
}

summary {
  user-select: none;
  padding: 1em;
  cursor: pointer;
  /* 移除原生展开标记，避免视觉冲突 */
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
/* 自定义展开/收起图标，反馈交互状态 */
summary::after {
  content: '▼';
  float: right;
  transition: transform 250ms ease-in-out;
}
details[open] summary::after {
  transform: rotate(180deg);
}

.content-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-in-out;
}

details[open] .content-wrapper {
  grid-template-rows: 1fr;
}

article {
  overflow: hidden;
  padding: 0 1em;
  /* 关键：给内容容器设置最小高度，确保0fr时仍有可计算的布局空间 */
  min-height: 0;
}

HTML #

<body>
  <details>
    <summary>Lorem Ipsum</summary>
    <div class="content-wrapper">
      <article>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat..."
        </p>
        <p>
          "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..."
        </p>
        <p>
          "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda..."
        </p>
      </article>
    </div>
  </details>
</body>

关键改动说明 #

• 给<article>添加min-height: 0：确保grid-template-rows: 0fr时，浏览器能正确识别容器的可过渡空间，避免布局计算异常。
• 明确过渡缓动函数：添加ease-in-out让动画更平滑，同时确保过渡属性仅作用于目标容器。
• 自定义交互图标：移除原生标记，通过图标旋转反馈展开/收起状态，避免原生行为的视觉干扰。
• 使用类名选择器：让样式选择更精准，减少潜在的样式冲突。

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