是什么导致网格模板行转换出现延迟？

Question

自从我发现可以使用

height: auto;

制作动画

grid-template-rows

的选项以来，我一直在我认为合适的地方使用它，例如菜单或常见问题解答项目。

最近我注意到内部元素的滑动速度不如外部元素。

看到这个小提琴：https://codepen.io/stenpelzer/pen/bGOPrLX。

为什么会出现这种情况？

Answer 1

添加到

.outer

transition-timing-function: linear;

默认是

ease

。该值将动画设置为慢速启动，然后在一段时间后速度增加，在结束之前速度再次变慢。