height: auto 无法参与 CSS transition，因非数值属性不可插值；应使用 max-height 替代并设合理值（如500px），配合 overflow: hidden；精度要求高时需 JS 获取真实高度。
直接用 height 做过渡几乎必然失败——因为 height: auto 无法被 CSS 动画识别，浏览器不知道“auto”该算多少像素，过渡会直接跳变或完全不生效。
为什么 height: auto 不能参与 transition
CSS 的 transition 只能作用于可计算的数值型属性。当元素从 height: auto 切换到 height: 0（或反之），浏览器无法插值，只能瞬间切换。这是最常被忽略的根本限制。
-
height: auto不是具体数值，不是长度单位，无法参与动画插值 - 即使写
transition: height 0.3s，实际效果仍是“闪现”，无过渡 - 部分旧教程用
max-height替代，但若设值过小会截断内容；过大则动画时长失真
用 max-height 实现“伪高度过渡”的实操要点
这是目前最通用、无需 JS 的方案，但必须控制好 max-height 的取值范围。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 给过渡容器设一个**足够大但不过分夸张**的
max-height，例如max-height: 500px（适用于多数卡片、提示框） - 起始/结束状态统一用
max-height控制，避免混用height和max-height - 务必设置
overflow: hidden，否则内容会溢出 - 示例类名（以
expand为例）：
.expand-enter-active,
.expand-leave-active {
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
overflow: hidden;
}
.expand-enter-from {
max-height: 0;
opacity: 0;
}
.expand-enter-to {
max-height: 500px; /* 必须显式写出，不能用 auto */
opacity: 1;
}
.expand-leave-from {
max-height: 500px;
opacity: 1;
}
.expand-leave-to {
max-height: 0;
opacity: 0;
}
需要精确高度时，必须用 JavaScript 配合 getBoundingClientRect
当内容高度差异大（比如折叠面板含图片、多行文本）、且要求严丝合缝的动画节奏时，纯 CSS 不够用。此时需在钩子中读取真实高度。
- 在
beforeEnter钩子中调用el.getBoundingClientRect().height获取目标高度 - 将该值临时写入
el.style.maxHeight，再触发重排（void el.offsetHeight） - 在
afterEnter中清除内联样式，恢复为max-height: none或auto - 注意：Vue 3 中钩子函数签名已变，
enter钩子需带 done 回调，否则动画可能卡住
容易被忽略的兼容性与性能细节
看似简单的高度过渡，实际在 Safari、老版 Chrome 上容易出问题，且大量同时展开会拖慢渲染。
- Safari 对
max-height过渡支持不稳定，建议加-webkit-transition前缀 - 避免在 v-for 列表中对每个项都启用高度过渡——优先考虑使用
transform: scaleY()+opacity组合，性能更好 - 如果内容含图片，确保图片加载完成后再触发展开，否则
getBoundingClientRect会读错高度 - 移动端触摸反馈延迟明显时，可提前在
before-enter中设el.style.will-change = 'max-height'，但用完记得清掉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
