最常见的 dom 操作时序问题是点击按钮后展开动画闪一下就消失，根源在于 css 过渡依赖正确初始状态，而 js 直接设 height: auto 会跳过过渡；解决关键是分两帧操作：第一帧设 height: 0 并强制重排，第二帧设目标高度触发过渡。
点击按钮后不展开，只闪一下就消失
这是最常见的 DOM 操作时序问题：按钮被点击后立即执行了 toggle 或 classList.toggle，但 CSS 过渡（transition）依赖元素在展开前已有正确初始状态（比如 height: 0、overflow: hidden），而 JS 直接设 style.height = 'auto' 会跳过过渡——浏览器来不及渲染中间帧。
解决关键是「分两帧」操作：
- 第一帧：先设
height: 0并强制重排（如读取offsetHeight），确保样式生效 - 第二帧：再设
height: 'auto'或目标高度（需提前计算），触发过渡
示例关键逻辑：
button.addEventListener('click', () => {
const input = document.getElementById('search-input');
const isExpanded = input.classList.contains('expanded');
if (isExpanded) {
input.style.height = '0';
input.style.overflow = 'hidden';
// 强制重排
input.offsetHeight;
input.classList.remove('expanded');
} else {
input.classList.add('expanded');
// 获取真实高度（注意：此时 display 可能为 none，需临时设为 block）
input.style.display = 'block';
const height = input.scrollHeight + 'px';
input.style.display = '';
input.style.height = '0';
input.offsetHeight; // 再次重排
input.style.height = height;
}
});
CSS transition 用 width 还是 height？
用 height 更可靠。因为 width 在 inline 元素或 flex 容器中行为不稳定，且输入框默认 display: inline-block，宽度受父容器约束，容易出现“展开一半卡住”或“突然撑开”的现象。
height 的前提是：输入框必须有明确的 box-sizing: border-box，且不能依赖 min-height 或 line-height 触发不可预测的高度变化。
- 务必设置
overflow: hidden，否则内容会溢出导致高度计算错误 - 避免在 transition 中使用
max-height代替height—— 它无法精确控制结束点，动画易“甩尾”或加速不均 - 过渡时间建议
transition: height 0.3s ease-in-out，太短（0.4s）交互迟滞
输入框展开后无法获得焦点
焦点失效通常不是 JS 问题，而是 CSS 阻断：当 height: 0 时，若同时设了 visibility: hidden 或 opacity: 0，即使 DOM 存在，input.focus() 也会静默失败。
- 只靠
height和overflow控制显隐，不要叠加visibility或display: none - 展开完成后手动调用
input.focus()，但必须等 transition 结束（监听transitionend事件，而非 setTimeout） - 如果用了
display: none切换，需在设为block后 nextTick 再 focus（Vue 用户可用nextTick，原生可用requestAnimationFrame）
推荐写法：
input.addEventListener('transitionend', (e) => {
if (e.propertyName === 'height' && input.style.height !== '0px') {
input.focus();
}
});
移动端 Safari 下动画卡顿或跳变
Safari 对 height 过渡的硬件加速支持弱，尤其在 transform 或 will-change 缺失时容易掉帧。这不是 bug，是渲染管线限制。
- 给输入框加
will-change: height（仅展开态，避免常驻影响性能） - 避免在 transition 中同时修改
padding或border—— 它们会触发布局重算，放大卡顿 - 真机调试时发现跳变，大概率是
scrollHeight计算不准（比如字体加载未完成、rem/em 单位未解析完毕），可延迟 1 帧再取值
更稳妥的做法：用 transform: scaleY(0) → scaleY(1) 替代 height，但需配合 transform-origin: top 和 overflow: hidden，且要处理 input 内部文字缩放失真问题——这已是权衡后的折中方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
