使用grid-template-rows实现的Vanilla JS手风琴组件为何出现两种不同的过渡动画表现？

你观察到的现象确实和Grid布局的固有计算逻辑有关，核心原因在于容器的grid-template-rows过渡与内部内容的显示/隐藏逻辑并非完全同步，具体拆解如下：

问题根源 #

1. 容器的过渡逻辑
   当你设置grid-template-rows: 0fr到1fr的过渡时，浏览器会先计算出1fr对应的实际像素高度（即内容的总高度），然后对这个像素值执行1s ease的过渡动画。这个动画是针对容器行高的数值变化，遵循你设置的ease曲线完成从0到固定值的过程。

2. 内容的显示逻辑
   内部的div设置了overflow: hidden和min-height: 0，它的高度完全依赖于父Grid容器的行高。内容（比如<p>标签）本身没有过渡效果，只是随着容器高度的增加逐渐从顶部“露出”，或随着容器高度降低逐渐被裁剪。

这种差异导致了视觉上的不同步：

• 展开时：容器行高在动画前期快速增长，而内容需要等容器高度足够大时才会完全显示，所以看起来容器动画快于内容。
• 收起时：容器行高还没降到0，内容就已经被完全裁剪隐藏，所以看起来内容消失速度快于容器。

解决方案 #

要让两者视觉上同步，最简单的方式是给内容容器添加透明度过渡，让内容的显示/隐藏和容器的高度变化绑定：

修改CSS代码，给内部内容容器添加透明度过渡：

h2 + div > div, h3 + div > div {
  overflow: hidden;
  min-height: 0;
  /* 新增透明度过渡，与容器过渡时长、曲线保持一致 */
  opacity: 0;
  transition: opacity 1s ease;
}

/* 当面板展开时，显示内容 */
.open > h2 + div > div, .open > h3 + div > div {
  opacity: 1;
}

另外，如果你希望更贴合Grid的特性，也可以调整过渡曲线（比如用linear代替ease），让容器的行高变化和内容的显示进度更匹配，但透明度过渡的视觉效果会更自然。

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