本文详解如何通过纯 CSS 的 top 位移过渡替代 height 过渡，彻底解决下拉动画卡顿、内容突显、容器“弹出”等常见问题，实现真正丝滑的折叠/展开效果。
本文详解如何通过纯 css 的 `top` 位移过渡替代 `height` 过渡，彻底解决下拉动画卡顿、内容突显、容器“弹出”等常见问题，实现真正丝滑的折叠/展开效果。
在 Web 动画实践中，直接对 height（尤其是从 0 到 auto 或百分比）设置 CSS transition 是导致不流畅的核心原因——浏览器需在每一帧反复计算并重排（reflow）整个 .calculator-content 的布局尺寸，极大消耗性能，尤其在内容较多或设备性能一般时，极易出现“半截滑出”“背景容器瞬间撑开”等视觉断裂现象。
✅ 更优解：用 position: absolute + top 过渡替代 height 过渡
原理是将内容区域脱离文档流，通过控制其垂直偏移量实现“隐藏/显示”视觉效果，避免触发重排，仅涉及重绘（repaint），性能显著提升：
.calculator-container {
position: relative;
height: 45px; /* 初始高度（仅显示标题）*/
overflow: hidden;
transition: height 1s ease-out; /* 容器高度平滑扩展 */
}
.calculator-content {
position: absolute;
top: -380px; /* 初始完全上移隐藏（值需根据实际内容高度微调）*/
left: 0;
right: 0;
z-index: 5;
transition: top 1s ease-out; /* 关键：只过渡 top，无重排 */
}
.calculator-container.open {
height: 480px; /* 展开后总高度（标题 + 内容区）*/
}
.calculator-container.open .calculator-content {
top: 60px; /* 下移至可视区域（60px ≈ 标题高度 + padding）*/
}? 关键细节说明：
- 标题
<p></p>需设为position: relative; z-index: 10，确保始终位于.calculator-content之上，避免遮挡； -
.calculator-container的padding-top改为0，改用标题内边距（如padding: 22px 0）控制顶部留白，使高度计算更可控； -
top的初始/目标值（如-380px/60px）需根据实际内容总高度手动测量或使用 JS 动态计算（进阶可选），但静态值已能满足绝大多数固定结构场景； - 过渡时间统一设为
1s（或0.4s等）并添加ease-out缓动，比默认线性更符合自然动效直觉。
? JavaScript 保持极简（非必需，但推荐）：
jQuery 仅用于切换 class，零动画逻辑，安全可靠：
$(document).ready(function() {
$('.calculator-container').hover(
function() { $(this).addClass('open'); }, // 鼠标进入
function() { $(this).removeClass('open'); } // 鼠标离开
);
});⚠️ 注意：若需点击触发（而非悬停），请改用 click 事件并配合 toggleClass，同时建议增加 pointer-events: none 到 .calculator-content 初始状态，防止悬停时误触内部元素。
✅ 最终效果优势：
立即学习“前端免费学习笔记（深入）”；
- 100% CSS 驱动，无 JS 动画帧压力；
- 零重排（reflow-free），60fps 流畅播放；
- 兼容所有现代浏览器（Chrome/Firefox/Safari/Edge）；
- 代码可维护性强，样式与行为解耦清晰。
如需进一步增强体验，可追加 transform: translateY() 替代 top（硬件加速更佳），或结合 opacity 实现淡入叠加效果。但对本例而言，top 方案已是最简、最稳、最高效的解决方案。
