CSS 高度与显示属性过渡失效的解决方案

css 过渡（transition）无法作用于 `height: auto` 或 `display: none/block` 等非连续、不可插值的属性值；需改用 `height` 的具体数值 + `opacity`/`visibility` 组合实现平滑展开效果。

在 Web 开发中，为元素高度或可见性添加 CSS 过渡效果是常见需求，但许多开发者会遇到“过渡不生效”的困惑——例如 .text 元素从 height: auto 变为 height: 3rem 时毫无动画，或

标签使用 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: ab
solute;
  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 方案（硬件加速，性能更优）。

通过明确初始状态、选用可插值属性，并合理组合视觉与布局控制，即可稳定实现符合预期的高度展开与内容浮现过渡效果。