width过渡需显式设初始和目标值（如200px→400px），auto或百分比易失效；推荐transform:scaleX()提升性能；:focus-within需同父容器；移动端需处理键盘唤起导致的宽度突变。

transition 宽度变化必须配初始值和单位

直接写 transition: width 0.3s 很可能没反应——因为浏览器无法推断起始/结束状态。width 的初始值可能是 auto、100% 或继承值，而 auto 无法参与 CSS 过渡计算。

• 必须显式设初始宽度，比如 width: 200px 或 width: 12rem
• 目标状态也得是带单位的确定值，如 width: 400px，不能是 width: 100%（除非父容器宽固定）
• 如果要用响应式单位，width: 50vw 可以，但注意 vw 值在缩放或横竖屏切换时会跳变，过渡可能不连贯

用 transform 替代 width 更稳妥

当搜索框需要从窄态“弹出”到全宽，尤其在移动端或高频率交互场景下，直接改 width 会触发 layout → paint → composite 全流程，容易卡顿。用 transform: scaleX() 只走合成层，性能更好。

• 把 input 包进一个 <div class="search-input-wrapper">，设 <code>overflow: hidden
• input 本身固定宽（比如 width: 100%），wrapper 控制缩放：transform: scaleX(0.3) → transform: scaleX(1)
• 配合 transform-origin: left center，保证从左向右展开
• 注意：scale 不影响文档流，若 wrapper 外有 flex 或 grid 布局，需额外处理占位

:focus-within + transition 在父子结构里才可靠

:focus-within 确实能免 JS 实现点击图标即展开，但前提是图标和 input 必须在同一个父容器内，且该父容器是 :focus-within 的作用对象。


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载
• 错误写法：图标在 <header></header>，input 在 <main></main> → 伪类完全不生效
• 正确结构示例：

  <div class="search-group">
    <input type="text" class="search-input">
    <button class="search-icon"></button>
  </div>

• CSS 写法：.search-group:focus-within .search-input { width: 300px; }
• 注意：IE 不支持 :focus-within，如需兼容，得 fallback 到 JS 监听 click/focus

移动端键盘唤起时宽度突变的修复

在 iOS Safari 或部分安卓 WebView 中，input 获焦后页面缩放或 viewport 重算，可能导致 width 过渡被中断、回弹或错位。

立即学习“前端免费学习笔记（深入）”；

• 加 viewport meta 的 user-scalable=no 不推荐——牺牲可访问性
• 更安全的做法：监听 focus 事件，在 JS 中立即强制重设宽度，比如 el.style.width = '300px'; setTimeout(() => el.style.width = '', 0)
• 或者用 min-width/max-width 组合兜底，避免 width 被 viewport 重排覆盖
• 真机测试时务必检查软键盘收起瞬间是否残留缩放态，这常被忽略