React组件Transition过渡动效实现 周边元素自适应无留白咨询

问题根因 #

你之前使用top+translateY的实现方案让动效元素脱离了正常文档流，父容器高度不会跟随元素位置变化，所以才会出现固定留白，且无法支持多个动效元素叠加使用。

通用解决方案（支持多模块折叠动效） #

直接对动效元素的包裹容器做高度过渡，让元素始终保留在文档流内，父容器会自动跟随内容高度变化，下方元素也会同步调整位置，完全消除留白。
针对height: auto无法直接触发过渡的问题，推荐以下两种实现方案：

方案1：max-height过渡（兼容性最好，实现简单） #

适合内容高度波动不大的场景，兼容性覆盖所有主流浏览器：

/* 每个可折叠模块的公共包裹样式，支付表单、物流表单都可以复用 */
.collapse-wrapper {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
/* 展开状态：设置一个远大于所有可能内容高度的值即可 */
.collapse-wrapper.expanded {
  max-height: 1000px;
}

使用逻辑：切换支付方式/物流选项时，对应模块的.collapse-wrapper添加/移除expanded类即可。

方案2：grid布局过渡（丝滑无上限，无需预估高度） #

不需要提前预估内容最大高度，适配任意高度的内容，目前主流浏览器均已支持：

.collapse-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}
.collapse-wrapper > .content-inner {
  min-height: 0;
}
/* 展开状态 */
.collapse-wrapper.expanded {
  grid-template-rows: 1fr;
}

两种方案都支持多个折叠模块同时使用，物流、支付模块各自套独立的.collapse-wrapper即可，互相不会干扰，也不会出现布局留白问题。

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