css3过渡效果如何处理高度不确定的动态内容

如下图，要实现一个超出一定高度默认折叠的div层，下边带有展开/折叠按钮，点击按钮实现展开/折叠。

 原来的代码：

.attrTable {border-right: 1px solid #f5f5f5;border-bottom: 1px solid #f5f5f5;height: auto;transition: height 1s ease;&.collapse {height: 400px;overflow: hidden;}
}

这种写法是不会生效的，由于div层的高度是auto，折叠后的高度是400px，浏览器无法计算从auto到400px的过渡处理。当然也可以在获取数据并渲染之后实时计算具体高度，但这个就太复杂了。

有效的解决方案就是使用max-height代替height，代码如下：

.attrTable {border-right: 1px solid #f5f5f5;border-bottom: 1px solid #f5f5f5;height: auto; /* 保持动态高度 */max-height: 5000px; /* 展开时上限（远大于实际动态高度） */overflow: visible; /* 展开时显示全部内容 */transition: max-height 1s ease; /* 过渡目标改为 max-height */&.collapse {max-height: 400px; /* 折叠时固定上限 */overflow: hidden; /* 隐藏超出部分 */}
}

如上，给div层设置一个很大的max-height，使用max-height来作为动态效果触发的样式，就能实现展开/折叠的过渡效果了。

关键说明：
1. max-height 取值技巧：
展开状态的 max-height 要设为 “肯定大于动态高度” 的数值（如 5000px，根据你的实际场景调整，只要不小于最大可能高度即可）。
折叠状态的 max-height 保持你要的 400px，实现 “固定高度折叠”。
2. 为什么生效：
展开时：max-height: 5000px（实际高度由内容决定，动态自适应），overflow: visible 显示全部内容。
折叠时：max-height: 400px，超出部分被 overflow: hidden 隐藏，且 max-height 从 5000px → 400px 是 “数值→数值” 的过渡，浏览器能正常计算动画。
3. 优化体验（可选）：
如果动态高度很小（比如不到 400px），折叠时可能看不到过渡效果，可给展开状态加最小高度兜底：

.attrTable {/* 其他样式不变 */min-height: 100px; /* 确保展开时至少有一定高度，过渡更明显 */
}