CSS transition 无法在 sticky 元素动态添加类时生效，根本原因是其初始高度为 auto，而 CSS 过渡要求起始和结束值均为可计算的具体数值（如 px），本文提供兼容性好、无需重排干扰的纯 CSS + JS 巧妙解法。
css `transition` 无法在 sticky 元素动态添加类时生效，根本原因是其初始高度为 `auto`，而 css 过渡要求起始和结束值均为可计算的具体数值（如 `px`），本文提供兼容性好、无需重排干扰的纯 css + js 巧妙解法。
在实现“滚动吸顶 + 平滑缩放/变高”交互动效时，开发者常尝试对 position: sticky 元素通过添加 .stuck 类来触发动画，例如：
.contents {
position: sticky;
top: 0;
transition: height 3s ease;
}
.stuck {
height: 100px;
background-color: green;
}但实际运行中，过渡（transition）完全不生效——元素高度瞬间跳变，毫无动画效果。这不是浏览器 Bug，而是 CSS 动画机制的必然限制：当元素高度从 auto（非数值）过渡到 100px（具体数值）时，浏览器无法插值计算中间状态，因此直接跳过 transition。
✅ 正确解法：固化初始高度为具体像素值
核心思路是——让初始状态也具备明确的、可动画的 height 值。由于内容高度动态生成，我们需在 DOM 渲染后立即读取并固化其自然高度：
const content = document.querySelector('.contents');
// 关键：在样式计算完成后，将当前 clientHeight 写入内联 style
content.style.height = content.clientHeight + 'px';
const initialPos = content.offsetTop;
window.addEventListener('scroll', () => {
// 使用 toggle 更简洁，语义清晰
content.classList.toggle('stuck', content.offsetTop > initialPos);
});对应 CSS 需做两处关键调整：
立即学习“前端免费学习笔记（深入）”；
- 移除 .contents 的 height: auto（默认行为）干扰：显式设置初始高度（由 JS 注入）；
- .stuck 中使用 !important 确保覆盖内联 height（也可用更高优先级选择器替代）：
.contents {
margin-top: 50px;
border: 1px solid black;
position: sticky;
top: 0;
transition: height 3s ease; /* 推荐加上 timing-function */
}
.stuck {
height: 100px !important; /* 必须强制覆盖 JS 设置的初始 height */
background-color: green;
}⚠️ 注意事项：
- clientHeight 读取时机必须在元素已渲染且样式生效后（如 DOMContentLoaded 或 requestAnimationFrame 内），本例中因脚本置于 HTML 底部或使用 defer，通常已满足；
- 若内容存在图片或异步加载，需监听 load 或使用 ResizeObserver 回退处理；
- 避免在 scroll 事件中频繁调用 offsetTop（虽轻量，但可缓存）；更优实践是用 getBoundingClientRect().top
- 如需过渡其他属性（如 padding、font-size），同样需确保其初始值为具体数值，而非 em/rem/auto 等相对或不可计算值。
✅ 进阶优化：无闪动、响应式兼容方案
若希望保持原始流式布局语义（即不锁定 height 影响响应式），可改用 transform: scaleY() 实现视觉缩放过渡（不触发重排）：
.contents {
transition: transform 0.3s ease, background-color 0.3s ease;
}
.stuck {
transform: scaleY(0.6); /* 视觉压缩，不影响文档流 */
background-color: green;
}此方式无需 JS 设置初始高度，兼容性更好（Chrome 36+ / Firefox 16+），且性能更优。
综上，sticky 元素过渡失效的本质是 CSS 动画对 auto 值的不支持。通过 JS 固化初始尺寸，或改用 transform 等可动画属性，即可优雅实现丝滑吸顶交互动效。
