Grid布局表单附加区域切换CSS过渡动画不流畅问题

用max-height做展开折叠的方案本身完全可行，你现在的观感割裂主要来自三个配置错位：

• 展开态给所有折叠区域设的max-height: 1000px远大于实际内容高度。动画过程中，内容早在高度达到实际值时就已经完全露出，剩下的过渡时长全是空跑（overflow: hidden会把超出内容的max-height部分藏住，没有视觉反馈）；等折叠时又要从1000px的高度往0值回落，中间大半段高度变化都看不到画面动效，自然会觉得动画拖沓、收尾突然。
• 折叠基础态、展开选中态分别写了两套不一致的transition参数：折叠态用max-height 0.6s linear, margin-bottom 0.4s linear，展开态又覆盖成max-height 1s linear, margin-bottom 0.2s linear，导致展开、折叠两个方向的动画节奏完全不匹配。
• visibility的过渡写法错误：你写的transition: visible 1.5s不是合法可过渡属性，正确可过渡的属性是visibility本身，所以那块删除按钮的显示过渡根本没生效。

1. 匹配实际内容高度设置max-height目标值 #

把原来的max-height: 1000px替换成刚好覆盖最高内容的冗余值，比如你表单里最高的展开区域是带textarea的notes/post_data，实际高度大概120-150px，就设成200px留足够余量，不要设远超实际的大值：

#container_extra:checked ~ #color,
#container_extra:checked ~ #position,
#container_extra:checked ~ #hr,
#item_extra:checked ~ #password,
#item_extra:checked ~ #post_data,
#item_extra:checked ~ #user,
#item_extra:checked ~ #notes {
  margin-bottom: 0.8em;
  max-height: 200px;
}

这样从0到200px的过渡全程都有对应的视觉变化，不会出现空跑的拖沓段落。

2. 统一transition配置 #

把transition只写在折叠基础态的选择器上，展开态不要重复覆盖，保证展开、折叠两个方向的动画节奏一致，替换生硬的linear匀速曲线为自然的标准缓动：

#color,
#position,
#hr,
#password,
#post_data,
#user,
#notes {
  margin-bottom: 0em;
  overflow: hidden;
  max-height: 0;
  transition: 
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    margin-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 展开态只写目标值，不覆盖transition */
#container_extra:checked ~ #color,
#container_extra:checked ~ #position,
#container_extra:checked ~ #hr,
#item_extra:checked ~ #password,
#item_extra:checked ~ #post_data,
#item_extra:checked ~ #user,
#item_extra:checked ~ #notes {
  margin-bottom: 0.8em;
  max-height: 200px;
}

3. 修正visibility过渡的错误 #

把原来写错的visible属性换成合法的visibility，配合短延迟保证按钮在区域展开后再显示，不会提前突兀露出来：

label.checkbox_del {
  visibility: hidden;
  transition: visibility 0.35s linear;
}
#container_extra:checked ~ #container label.checkbox_del,
#item_extra:checked ~ #name label.checkbox_del {
  visibility: visible;
  transition: visibility 0s linear 0.1s;
}

4. 适配Grid布局的额外优化 #

因为你的表单用Grid布局，展开/收起时相邻网格元素会随着高度变化移动位置，给所有直接放在网格内的子元素加统一的边距过渡，进一步弱化重排的突兀感：

.new_entry > div {
  transition: margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

调整完成后展开、折叠的动画会全程有连续的视觉反馈，不会再出现之前生硬的跳变感。如果后续内容高度会动态变化（比如textarea被用户拉高），只要把max-height的目标值设成比动态高度稍大的冗余值，不需要引入JS测量逻辑也能保持流畅。

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