React动画搜索栏CSS平滑过渡问题的修复方案

这个问题的核心原因是**position属性（static/absolute）属于不可过渡的CSS属性**，当你在关闭搜索栏时移除position: absolute，浏览器会立即重排元素位置，自然就没有平滑过渡效果了。我们可以通过以下两种方案来解决，核心思路是避免切换position类型，改用可动画的属性来控制图标的位置变化。

方案一：始终保持图标为绝对定位，用transform控制位置 #

我们可以让搜索图标始终处于position: absolute状态，通过调整transform属性来实现它在“输入框内”和“原位置”之间的平滑过渡，而不是切换定位类型。

修改后的核心代码示例 #

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [isSearchActive, setIsSearchActive] = useState(false);

  return (
    <nav className="nav-container">
      <div className={`logo ${isSearchActive ? "shrink" : ""}`}>Logo</div>
      <div className="search-bar-mobile">
        <input
          className={`search-input ${isSearchActive ? "expand" : ""}`}
          placeholder="Search..."
        />
        <button
          className={`search-icon ${isSearchActive ? "inside-input" : ""}`}
          onClick={() => setIsSearchActive(!isSearchActive)}
        >
          🔍
        </button>
      </div>
    </nav>
  );
}

对应的CSS样式：

.nav-container {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  background: #f0f0f0;
  height: 60px;
}

.logo {
  flex-grow: 1;
  font-size: 1.2rem;
  font-weight: bold;
  transition: flex-grow 0.3s ease;
}

.logo.shrink {
  flex-grow: 0;
}

.search-bar-mobile {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 0;
  padding: 0.5rem;
  border: none;
  outline: none;
  transition: width 0.3s ease;
}

.search-input.expand {
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-icon {
  position: absolute;
  right: 0;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.3s ease;
  /* 初始位置：和原布局一致 */
  transform: translateX(0);
}

.search-icon.inside-input {
  /* 展开时移动到输入框内部右侧 */
  transform: translateX(-200px);
}

思路说明 #

1. 始终让search-icon保持position: absolute，通过transform: translateX()来控制它的位置。
2. 搜索栏展开时，输入框宽度变为200px，同时图标向左移动200px（刚好进入输入框内部）；关闭时，输入框宽度缩回0，图标向右移动回原位置，两者的过渡时间保持一致（0.3s），就会形成同步的平滑动画。
3. logo的flex-grow过渡保持不变，实现被挤压的效果。

方案二：用容器固定图标位置，输入框覆盖扩展 #

另一种思路是把搜索图标放在一个固定宽度的容器里，搜索栏展开时输入框向左侧扩展，覆盖到容器的位置，图标始终留在容器内，这样完全不需要修改定位属性。

核心代码示例 #

.search-bar-mobile {
  display: flex;
  align-items: center;
}

.search-icon-container {
  width: 30px; /* 和图标宽度一致 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-input {
  width: 0;
  padding: 0.5rem;
  border: none;
  outline: none;
  transition: width 0.3s ease;
  margin-right: -30px; /* 覆盖图标容器 */
}

.search-input.expand {
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-right: 30px; /* 给图标留出空间 */
}

.search-icon {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 1; /* 确保图标在输入框上方 */
}

思路说明 #

1. 图标放在固定宽度的容器里，始终处于右侧。
2. 输入框默认宽度为0，展开时宽度变为200px，通过margin-right: -30px覆盖到图标容器的位置，同时padding-right: 30px避免输入内容被图标遮挡。
3. 图标设置z-index: 1保证在输入框上方可点击，整个过程没有定位属性的切换，自然就不会有跳转动画。

这两种方案都能解决你遇到的图标跳转问题，你可以根据自己的布局需求选择其中一种～

内容的提问来源于stack exchange，提问作者Sanketh B. K