当为元素设置 height 过渡时，若未显式声明过渡属性，仅 height 会平滑变化，而内部文本、阴影等样式会立即生效，造成“文字先闪现、再拉伸”的不协调效果。解决方法是明确指定需过渡的属性（如 height、overflow、box-shadow）或使用 all（需谨慎）。
当为元素设置 `height` 过渡时，若未显式声明过渡属性，仅 `height` 会平滑变化，而内部文本、阴影等样式会立即生效，造成“文字先闪现、再拉伸”的不协调效果。解决方法是明确指定需过渡的属性（如 `height`、`overflow`、`box-shadow`）或使用 `all`（需谨慎）。
在 CSS 动画中，transition 属性默认只作用于被显式修改的 CSS 属性。你当前的写法：
.experience-item {
height: 285px;
overflow: hidden;
transition: 1s ease-out; /* ❌ 错误：未指定过渡属性名 */
}
等价于 transition: all 1s ease-out 的旧版浏览器兼容写法，但现代标准中，省略属性名属于无效声明（部分浏览器会降级处理，行为不一致），实际仅 height 被过渡，而 overflow: visible 和 box-shadow 等变更均无过渡效果——这正是文本“瞬间出现”、阴影“突然弹出”的根本原因。
✅ 正确做法是显式声明所有需要过渡的属性：
.experience-item {
height: 285px;
overflow: hidden;
border-radius: 5px;
position: relative;
/* ✅ 明确过渡关键属性 */
transition:
height 1s ease-out,
overflow 1s ease-out, /* 确保 overflow 变化也缓动 */
box-shadow 1s ease-out;
}
.experience-item:hover {
height: 500px;
overflow: visible;
box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.2);
}
⚠️ 注意事项：
- overflow 属性本身不支持平滑过渡（CSS 规范中为离散值），但在多数浏览器中配合 height 过渡可实现视觉连贯性；若需更可靠效果，建议改用 max-height + padding 或 transform: scaleY() 方案。
- 避免滥用 transition: all 1s ease-out：它会使所有可动画属性（如 color、background）意外参与过渡，增加不可控风险，降低性能与可维护性。
- 更健壮的替代方案（推荐用于内容高度不确定场景）：
.experience-item {
max-height: 285px;
overflow: hidden;
transition: max-height 1s ease-out, padding 1s ease-out;
}
.experience-item:hover {
max-height: 1000px; /* 设为足够大的值，确保内容完全展开 */
padding: 20px;
}
总结：CSS 过渡必须“精准控制”，明确列出需动画的属性名。修复本例只需将 transition: 1s ease-out 改为 transition: height 1s ease-out, overflow 1s ease-out, box-shadow 1s ease-out，即可实现文本内容与容器高度严格同步展开的流畅体验。
