为何grid-template-rows过渡动画会出现延迟？

这个延迟的核心原因是浏览器的布局计算顺序：

• 当你用grid-template-rows从0过渡到auto时，浏览器首先要计算容器的最终高度——它需要先解析内部所有元素的尺寸，才能确定容器的auto值对应的具体像素高度。
• 容器的高度动画是基于这个计算出的目标值来执行的，但内部元素的布局更新（比如滑动、展开）是在容器高度变化的过程中逐步触发的，而非和容器动画同步启动。
• 简单说，容器的动画是“先拿到终点再动”，内部元素是“跟着容器动的过程逐步调整”，两者的启动时机差了一个容器尺寸计算的周期，所以视觉上就出现了内部元素滑动更慢的延迟感。

另外，你找到的解决方案（给内部元素加height: 100%; overflow: hidden;）能生效，是因为强制内部元素的高度和容器高度绑定，让它的布局更新和容器的动画同步进行，消除了这个计算差带来的滞后。

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