min-width 对 transition 无效，因其非可过渡属性，不参与连续插值计算；应改用 width 与 max-width 组合实现平滑动画，并注意 safari flex 兼容性及 class 切换时机。
transition 为什么对 min-width 无效？
直接给 min-width 加 transition 大概率没动画——浏览器不触发重排重绘，因为 min-width 本身不是“可过渡属性”，它只在尺寸被内容或父容器挤压时才起约束作用，不参与 layout 过程中的连续插值计算。
常见错误现象：transition: min-width 0.3s 写了但毫无反应；搜索栏突然跳变，没有平滑缩放。
- 真正能过渡的是
width、max-width、flex-basis这类直接影响尺寸计算的属性 -
min-width是“下限守门员”，不是“尺寸执行者”，过渡它就像给刹车片加弹簧——动作不在那儿 - 如果用 JS 强制触发
getComputedStyle或重排来“骗”过渡，性能差且不可靠
用 max-width 实现响应式搜索栏过渡
把搜索栏放进固定容器（比如 header），用 max-width 控制展开上限，配合 width 的百分比/视口单位过渡，就能自然响应不同屏幕宽度，同时保持动画连贯。
使用场景：顶部导航栏中，搜索框默认收窄为图标按钮，点击后展开为可输入区域，需适配手机到桌面全尺寸。
立即学习“前端免费学习笔记（深入）”；
- 初始状态设
width: 40px; max-width: 40px;，隐藏输入框 - 激活态改
width: 100%; max-width: 500px;，并确保父容器有overflow: hidden - 必须同时过渡
width和max-width，否则在小屏下可能撑破容器 - 移动端注意加
min-width: 0防止 flex 项目不收缩（尤其在display: flex的导航栏里）
input.search-input {
width: 40px;
max-width: 40px;
transition: width 0.25s ease, max-width 0.25s ease;
}
input.search-input.active {
width: 100%;
max-width: 500px;
}
transition 触发时机与 class 切换陷阱
单纯切换 class 不一定立刻触发动画，尤其当新样式和旧样式在 DOM 渲染队列里被合并优化时，浏览器可能跳过中间帧。
常见错误现象：点击后搜索栏瞬间变宽，无过渡；或第一次有效、后续失效。
- 确保 class 切换前后，目标元素的
width/max-width值确实不同（可用 DevTools 的 computed 栏验证） - 避免在同一个 JS tick 里先加 class 再读取
offsetWidth——要加requestAnimationFrame或setTimeout(..., 0)强制分帧 - 不要用
display: none控制显隐，它会彻底移除渲染树，transition 失效；改用visibility: hidden+opacity: 0或height: 0+overflow: hidden
移动端 Safari 的 flex + transition 兼容性坑
iOS 15–16 的 Safari 对 flex 容器内 width 过渡支持不稳定，尤其当父级是 display: flex 且子项未设 flex-shrink: 0 时，width 动画会被忽略或卡顿。
性能影响：动画掉帧、输入框闪烁、展开后宽度计算错误（比如显示为 0px）。
- 给搜索栏加
flex-shrink: 0，防止被 flex 压缩干扰 width 过渡 - 备用方案：用
transform: scaleX()模拟宽度变化（需配合transform-origin: left），虽非真实 width，但动画更稳 - 测试真机，模拟器常表现正常，但实际 iOS Safari 渲染路径不同
width 和 max-width 的组合比任何 hack 都可靠，但得小心 Safari 的 flex 行为和 class 切换的渲染节奏。 
