用 width/height 无法过渡 auto 值，应改用 max-width/max-height 配合 overflow: hidden；需统一 transition 时长与函数，避免强制同步布局，移动端注意 Safari 兼容性及 will-change 使用时机。
transition 用 width/height 做搜索框伸缩，为什么不动？
因为 width 和 height 在值为 auto 时无法过渡——浏览器不知道“从多少变到多少”。常见现象是：点击后尺寸瞬间跳变，毫无动画。
- 必须用具体数值（如
200px、40px）或max-width/max-height配合overflow: hidden模拟伸缩 - 搜索框推荐用
max-width过渡：初始设max-width: 0，展开时设为足够大的固定值（如max-width: 320px），再加overflow: hidden - 避免对
display属性做过渡（display: none → block不触发 transition）
search 输入框 + 容器同时展开，怎么保持节奏一致？
关键在统一过渡的 timing function 和 duration，并避免因盒模型计算延迟导致错拍。常见错误是容器用 height 过渡，而输入框用 width，两者渲染时机不一致。
- 容器展开优先用
max-height（而非height），设一个足够大的上限值（如max-height: 500px），并确保内容高度不超过它 - 输入框和容器共用同一组 transition 声明：
transition: max-width 0.3s ease, max-height 0.3s ease - 如果容器内有 padding/border，记得在
max-height中预留空间，否则过渡末尾会突然“撑开”
移动端 Safari 上伸缩卡顿或闪一下？
这是 WebKit 渲染优化导致的常见兼容性问题，尤其在 max-height 从 0 开始过渡时，Safari 可能跳过部分帧或重排异常。
- 给触发元素加
transform: translateZ(0)或will-change: max-height（仅在需要时加，别滥用） - 避免在
:hover上直接驱动伸缩（移动端无 hover），改用class切换 + JavaScript 控制 - 测试时务必真机连 Safari Web Inspector，看 timeline 是否出现 layout 强制同步（forced synchronous layout）警告
JavaScript 控制展开状态时，如何避免 transition 误触发？
比如刚加 class 就立刻读取 offsetHeight，会导致浏览器强制同步计算，打断 transition 流程，甚至让动画失效。
立即学习“前端免费学习笔记（深入）”；
- 状态变更和尺寸读取要分离：先加 class，等下一帧再读尺寸（用
requestAnimationFrame包一层） - 展开前确保元素已渲染（比如不在
display: none父容器里）；若需隐藏，用visibility: hidden+opacity: 0替代 - 过渡结束监听用
transitionend事件，但注意它可能被子元素触发多次，过滤目标：if (e.target === e.currentTarget)
max-height 的上限值、will-change 的副作用、Safari 对 0 → auto 的放弃治疗，这些才是实际卡住的地方。 
