css 过渡（transition）无法作用于 `height: auto` 或 `display: none/block` 等非连续、不可插值的属性值；需改用 `height` 的具体数值 + `opacity`/`visibility` 组合实现平滑展开效果。
在 Web 开发中，为元素高度或可见性添加 CSS 过渡效果是常见需求，但许多开发者会遇到“过渡不生效”的困惑——例如 .text 元素从 height: auto 变为 height: 3rem 时毫无动画，或 <p> 标签使用 display: none → block 却完全跳变。根本原因在于：CSS transition 仅对可计算、可插值（interpolatable）的数值型属性有效。
? 关键限制说明
- ❌ height: auto 无法参与过渡：浏览器无法计算 auto 的起始像素值，故无过渡路径；
- ❌ display: none / block 不可插值：display 是离散状态切换，无中间值，transition 被直接忽略；
- ✅ 推荐替代方案：
- 高度变化 → 使用明确的初始 height（如 0.5rem、0）配合 overflow: hidden；
- 显隐控制 → 使用 opacity: 0/1 + visibility: hidden/visible（visibility 控制交互与布局占位，opacity 提供视觉渐变）。
✅ 正确实现示例
以下为修复后的核心 CSS 片段（已适配原结构）：
.text {
background: black;
box-shadow: 0 0 2rem 5rem black;
position: absolute;
left: 0;
bottom: 0;
height: 0.5rem; /* ✅ 替换 auto，设为具体值 */
width: inherit;
overflow: hidden; /* ✅ 防止内容溢出破坏动画 */
transition: height 0.5s ease;
}
.card:hover .text {
height: 3rem;
}
.text p {
position: absolute;
bottom: 1rem;
left: 1rem;
color: white;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease; /* ✅ 双属性过渡 */
}
.card:hover .text p {
opacity: 1;
visibility: visible;
}? 小技巧：若需更自然的“收起”效果，可将初始 height 设为 0 并配合 padding-top/bottom: 0 和 line-height: 0，但需确保子元素不撑开容器（overflow: hidden 必不可少）。
⚠️ 注意事项
- 避免混用 max-height 伪替代：虽常见（如 max-height: 0 → 500px），但因目标值需远超实际高度，易导致动画时长失真，且无法精确控制节奏；
- visibility 必须配合 opacity：仅设 visibility 会导致瞬间显示/隐藏（无渐变），而仅设 opacity 会保留占位与可点击区域；
- 性能提示：height + overflow: hidden 属于非合成属性（触发重排），若动画频繁，建议优先考虑 transform: scaleY() + origin-bottom 方案（硬件加速，性能更优）。
通过明确初始状态、选用可插值属性，并合理组合视觉与布局控制，即可稳定实现符合预期的高度展开与内容浮现过渡效果。
