使用相对单位设置max-height过渡效果无法正常生效问题咨询

问题1 相对单位下无动画的原因&参考点规则 #

你写的max-height用百分比单位时无法过渡的核心原因是百分比值找不到合法的参考基准，导致浏览器无法计算过渡的中间帧：

• 百分比形式的max-height的参考对象是「最近的、显式设置了非auto高度值的父元素」，你的目标div的直接父元素是body，你只给html标签设置了高度，没有给body也同步设置height: 100%，所以div的max-height: 100%会被浏览器判定为无效， fallback为默认值none。
• 你现在的过渡是从max-height: 0到max-height: none，这两个值无法做数值插值计算，浏览器会等到过渡时长结束后直接切换状态，所以你只能看到延迟看不到动画。
  如果你一定要用百分比单位做max-height过渡，需要给div的所有父级元素链上的节点都显式设置固定高度，不能留默认的auto值。

问题2 固定单位下单向动画的原因 #

换成固定单位后只有单向动画生效，本质是max-height的生效逻辑和你设置的数值差导致的感知偏差：

• 首先明确规则：元素的实际渲染高度不会超过max-height的值，但如果max-height大于等于元素本身的内容高度/设置的height值，元素高度就会按自己的height/内容高度渲染，不会跟着max-height变化。
• 你代码里给div写死了height: 100px，如果你给正常状态的div设置的固定max-height大于100px，就会出现这个问题：
  1. 展开的时候：max-height从0涨到大于100px的数值，在0到100px的区间内，元素高度跟着max-height同步涨，你能看到平滑动画
  2. 折叠的时候：max-height从大于100px的数值往0降，前半段max-height从初始值降到100px的过程里，元素高度始终是100px没有变化，你看不到任何动画效果，只有等max-height降到100px以下后，元素才会开始收缩，如果你设置的max-height远大于100px，你甚至会以为折叠动画完全没触发，只有展开动画生效。

通用折叠动画方案推荐 #

如果想要做不限场景复用的折叠动画，更推荐用grid-template-rows实现，不需要预先知道高度，也没有单位限制：

.wrap {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows 0.5s ease;
}
.wrap.collapsed {
  grid-template-rows: 0fr;
}

内部内容不需要做特殊设置，兼容性也覆盖了绝大多数现代浏览器。

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