CSS宽度过渡异常：搜索框展开时父元素先占满宽度如何修复？

尝试实现粉色搜索框宽度平滑过渡，推动旁边蓝色搜索图标左移，但当前效果是：粉色区域先瞬间占满父元素宽度，再执行自身动画，体验割裂；而父元素的margin（左侧绿色区域）动画是平滑的。期望绿色和粉色区域同步平滑扩展，共同推动蓝色图标左移。

问题根源 #

输入框设置width: 100%时，父元素.header__searchBox初始无固定宽度，100%会基于父元素的自动宽度瞬间撑开容器，导致输入框动画滞后于父元素的margin动画，出现“先撑开再动画”的割裂感。

解决方案 #

调整.header__searchBox的宽度过渡逻辑，让父元素的宽度和输入框的宽度变化同步：

• 给.header__searchBox设置初始宽度0，并添加width属性的过渡
• 搜索状态下给.header__searchBox设置固定宽度（而非依赖输入框撑开）
• 输入框始终保持width: 100%，只过渡padding属性

修改后的代码 #

JavaScript（无需修改）

let searching = true;

setInterval(() => {
  searching = !searching;
  document.querySelector('.header__searchBox').classList[searching ? 'remove' : 'add']('searching');
}, 1500);

CSS（关键修改部分标注）

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-areas: empty animated;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(2, 1fr);
}

.header__searchContainer {
  grid-area: animated;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: lightgreen;
  width: max-content;
}

.header__icon__search {
  display: flex;
  justify-self: center;
  justify-content: center;
  align-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background-color: lightblue;
}

.header__searchBox {
  transition: all 0.75s;
  margin-left: 0;
  background-color: pink;
  width: 0; /* 初始宽度设为0 */
  overflow: hidden; /* 隐藏超出内容 */
}

.header__searchBox.searching {
  margin-left: 1.5rem;
  width: 12rem; /* 搜索状态下设置固定宽度 */
}

.header__searchBox input {
  --verticalPad: 0.25rem;
  border-radius: 0.5rem;
  border: none;
  width: 100%; /* 始终占满父元素宽度 */
  padding: var(--verticalPad) 0;
  transition: all 0.75s;
}

.header__searchBox.searching input {
  padding: var(--verticalPad) 0.25rem; /* 只过渡padding */
}

HTML（无需修改）

<div class="grid">
  <div class="header__searchContainer">
    <div class="header__icon header__icon__search"></div>
    <div class="header__searchBox"><input type="search" placeholder="search"></div>
  </div>
</div>

效果说明 #

修改后，.header__searchBox的宽度从0平滑过渡到12rem，同时margin-left从0过渡到1.5rem，两者同步动画，绿色区域（父容器）和粉色区域（搜索框容器）会共同平滑扩展，推动蓝色图标同步左移，解决了动画割裂的问题。

内容的提问来源于stack exchange，提问作者Uche Ozoemena