css 过渡（transition）要求起始值和结束值均为可计算的确定值；`height: auto` 和 `display: none/block` 无法触发过渡效果，需改用 `height` 固定值、`opacity` + `visibility` 组合等可动画属性来实现平滑展开/隐藏。
在 Web 开发中，为元素高度或可见性添加 CSS 过渡效果是常见需求，但常因误解 CSS 动画机制而失败。核心问题在于：并非所有 CSS 属性都支持过渡，且过渡必须基于可插值（interpolatable）的数值型起止状态。
❌ 常见错误解析
height: auto 无法参与过渡
浏览器无法计算 auto 的具体像素值，因此从 height: auto → height: 3rem 不会触发动画，而是立即跳变。
✅ 正确做法：将初始 height 设为一个明确的小值（如 0.5rem 或 0），再过渡到目标高度。display: none / display: block 不可动画
display 是离散属性，无中间状态，浏览器直接切换，无视 transition 声明。
✅ 替代方案：使用 opacity（0→1）控制透明度 + visibility（hidden→visible）控制可交互性，二者配合实现“视觉上渐显+逻辑上可响应”的效果。-
缺少 transition-property 显式声明（虽非本例主因，但推荐实践）
建议明确指定过渡属性，避免意外继承或冗余计算：.text { height: 0.5rem; transition: height 0.5s ease; } .text p { opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s step-end; } .card:hover .text p { opacity: 1; visibility: visible; }? 注意：visibility 本身不可插值，但配合 step-end 时序函数可确保在 opacity 动画结束后才生效，避免半透明状态下内容被点击。
✅ 修正后的完整示例
.text {
background: black;
box-shadow: 0 0 2rem 5rem black;
position: absolute;
left: 0;
bottom: 0;
height: 0.5rem; /* 关键：禁用 auto，设为固定小值 */
width: inherit;
transition: height 0.5s ease;
}
.card:hover .text {
height: 3rem;
}
.text p {
position: absolute;
opacity: 0;
visibility: hidden; /* 隐藏但保留文档流位置 */
bottom: 1rem;
left: 1rem;
color: white;
margin: 0;
transition: opacity 0.5s ease, visibility 0.5s step-end;
}
.card:hover .text p {
opacity: 1;
visibility: visible;
}⚠️ 补充注意事项
- 若 .text 内容高度动态变化，且需自适应展开（如从 0 到“内容真实高度”），可结合 JavaScript 获取 scrollHeight 并设置内联 height，但纯 CSS 方案仍推荐固定高度或使用 max-height 过渡（需预估足够大的上限值）。
- overflow: hidden 在父容器（如 .card）中已存在，确保展开时内容不溢出，这是良好实践。
- 所有过渡属性建议统一使用简写 transition，提升可维护性，并避免 transition-property 遗漏导致失效。
通过理解 CSS 过渡的底层约束并选用可动画属性，即可稳定实现专业级交互动效——无需框架，仅靠标准 CSS 即可优雅解决。
