CSS 高度与显示属性过渡失效的解决方案：正确实现平滑动画

css 过渡（transition）要求起始值和结束值均为可计算的确定值；`height: auto` 和 `display: none/block` 无法触发过渡效果，需改用 `height` 固定值、`opacity` + `visibility` 组合等可动画属性来实现平滑展开/隐藏。

在 Web 开发中，为元素高度或可见性添加 css 过渡效果是常见需求，但常因误解 CSS 动画机制而失败。核心问题在于：并非所有 CSS 属性都支持过渡，且过渡必须基于可插值（interpolatable）的数值型起止状态。

❌ 常见错误解析

1. height: auto 无法参与过渡
   浏览器无法计算 auto 的具体像素值，因此从 height: auto → height: 3rem 不会触发动画，而是立即跳变。
   ✅ 正确做法：将初始 height 设为一个明确的小值（如 0.5rem 或 0），再过渡到目标高度。

2. display: none / display: block 不可动画
   display 是离散属性，无中间状态，浏览器直接切换，无视 transition 声明。
   ✅ 替代方案：使用 opacity（0→1）控制透明度 + visibility（hidden→visible）控制可交互性，二者配合实现“视觉上渐显+逻辑上可响应”的效果。

3. 缺少 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 即可优雅解决。