React搜索框CSS过渡不同步：inSearch跳转过快问题排查

我用React写了一个搜索栏组件，代码如下：

import './search.css'
const SearchBar = ({searchQuery, setSearchQuery}) => (
    <div className="search">      
        <input
            value = {searchQuery}
            onInput = {e => setSearchQuery(e.target.value)}
            type = "text"
            placeholder = "Search driver apps..."
            />
            <div className = "inSearch"></div>
    </div>
);

对应的CSS样式：

@import url('https://fonts.googleapis.com/css?family=Inconsolata:700');

.search{
  position: relative;
  margin-top: 50px;
  margin-left: 30px;
  width: 300px;
  height: 100px;
}

.search .inSearch
{
   position: absolute;
     margin-top: 30px;
   margin-left: 0px;
     width: 70px;
     height: 70px;
     background: #faa81a;
     border-radius: 50%;
   transition: all 1s ease-out;
     z-index: 4;
     box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
   opacity: 1;
}

.search .inSearch:hover{
  cursor: pointer;
}

.search .inSearch::before{
  content: "";
  position: absolute;
  margin: auto;
  top: 22px;
  right: 0;
  bottom: 0;
  left: 22px;
  width: 12px;
  height: 2px;
  background: white;
  transform: rotate(45deg);
  transition: all 0.5s ease-out;
}

.search .inSearch::after{
   content: "";
     position: absolute;
     margin: auto;
     top: -5px;
     right: 0;
     bottom: 0;
     left: -5px;
     width: 25px;
     height: 25px;
     border-radius: 50%;
     border: 2px solid white;
     transition: all .5s;
}

.search input {
  font-family: 'Inconsolata', monospace;
  position: absolute;
  margin-top: 30px;
  margin-left: 0px;
  width: 60px;
  height: 60px;
  outline: none;
  border: none;
  background: #faa81a;
  color: white;
  text-shadow: 0 0 10px #faa81a;
  padding: 0 80px 0 20px;
  border-radius: 30px;
  box-shadow: 0 0 25px 0 #faa81a, 0 20px 25px 0 rgba(0, 0, 0, 0.2);
  transition: all 1s ease-out;
  opacity: 0;
  z-index: 5;
  font-weight: bolder;
  letter-spacing: 0.1em;
}

.search input:hover{
  cursor: pointer;
}

.search input:focus{
   height: 50px;
   width: 200px;
     opacity: 1;
     cursor: text;
}

.search input:focus ~ .inSearch {
   right: -20px;
     background: #151515;
     z-index: 6;
}

.search input:focus ~ .inSearch::before{
  top: 0;
  left: 0;
     width: 25px;
}

.search input:focus ~ .inSearch::after{
  top: 0;
  left: 0;
  width: 25px;
  height: 2px;
  border: none;
  background: white;
  border-radius: 0%;
  transform: rotate(-45deg);
}

.search input::placeholder {
  color: white;
  opacity: 0.5;
  font-weight: bolder;
}

我对大部分过渡效果都满意，但inSearch div会瞬间跳到右侧，而搜索框是缓慢展开的，两者不同步。试过调整过渡曲线、时长、延迟都没用，怎么让它们同步展开？

问题核心是定位属性不统一：你初始用margin-left定位inSearch，但聚焦时却用right来控制位置，这两个属性不属于同一动画维度，浏览器无法平滑过渡这种属性切换，导致inSearch直接跳转到目标位置。

要解决这个问题，统一用left和top属性控制两个元素的定位，具体修改如下：

1. 修改.search .inSearch的初始定位
   把margin-top和margin-left替换为top和left，保持垂直水平位置不变：

.search .inSearch
{
   position: absolute;
   top: 30px; /* 替换margin-top */
   left: 0px; /* 替换margin-left */
   width: 70px;
   height: 70px;
   background: #faa81a;
   border-radius: 50%;
   transition: all 1s ease-out;
   z-index: 4;
   box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
   opacity: 1;
}

2. 修改.search input的初始定位
   同样替换margin-top和margin-left为top和left：

.search input {
  font-family: 'Inconsolata', monospace;
  position: absolute;
  top: 30px; /* 替换margin-top */
  left: 0px; /* 替换margin-left */
  width: 60px;
  height: 60px;
  outline: none;
  border: none;
  background: #faa81a;
  color: white;
  text-shadow: 0 0 10px #faa81a;
  padding: 0 80px 0 20px;
  border-radius: 30px;
  box-shadow: 0 0 25px 0 #faa81a, 0 20px 25px 0 rgba(0, 0, 0, 0.2);
  transition: all 1s ease-out;
  opacity: 0;
  z-index: 5;
  font-weight: bolder;
  letter-spacing: 0.1em;
}

3. 调整聚焦时inSearch的位置
   把right: -20px替换为left: 250px（计算逻辑：父容器宽度300px，减去inSearch自身宽度70px，再加上向右偏移的20px，确保和原视觉位置一致）：

.search input:focus ~ .inSearch {
   left: 250px; /* 替换right: -20px */
   background: #151515;
   z-index: 6;
}

这样修改后，inSearch的水平位置始终用left属性控制，和输入框的宽度过渡属于同一类可动画属性，两者就能同步平滑展开了。统一用top代替margin-top也能避免定位冲突，让动画更稳定。

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