修复以使 CSS 中的过渡平滑（动画搜索栏）答案

【问题标题】：Fix to make transition smooth in CSS (animated search bar)修复以使 CSS 中的过渡平滑（动画搜索栏）
【发布时间】：2021-09-03 22:51:23
【问题描述】：

我试图制作一个动画搜索栏，在点击 React 中的搜索图标时打开。我添加了背景颜色以清楚地显示正在发生的事情

这里是codesandbox

代码很长，但让我快速分解一下。

我有一个 flexbox 导航容器。它有 2 个元素 - 徽标和搜索图标。徽标最初占据了所有剩余空间（因为 flex-grow），而搜索图标只占据了所需的空间。

当点击搜索图标时，搜索输入会从 0 扩展到固定宽度，并将徽标推向左。

我还通过将 search-bar-mobile div 的位置设置为相对并将搜索图标设置为绝对，在搜索输入中放置相同的搜索图标。

但是当搜索栏处于关闭位置时：absolute 会立即从搜索图标中移除，使其立即捕捉到其原始位置。但是我想顺利过渡，请您提出任何解决方法。

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

标签： html css reactjs transition

【解决方案1】：

你必须做两件事

首先 - 像这样改变下面类的样式

.search-icon-mobile-active {
  color: var(--clr-grey-5);
  font-size: 10px;
}

其次将输入组件放在代码中搜索图标的后面

<form className="search-form-mobile">
  <FaSearch
    className={`nav-icon search-icon-mobile  ${
      searchBarMobileActive ? "search-icon-mobile-active" : ""
    }`}
    onClick={() => setSearchBarMobileActive(true)}
  />

  <FaTimesCircle
    className={`search-close-button-mobile ${
      searchBarMobileActive ? "search-close-button-mobile-active" : ""
    }`}
    onClick={() => setSearchBarMobileActive(false)}
  />

  <input
    type="text"
    className={`search-input-mobile ${
      searchBarMobileActive ? "search-input-mobile-active" : ""
    }`}
    onBlur={() => setSearchBarMobileActive(false)}
  />

  <button
    type="submit"
    className="search-submit-button-mobile"
  ></button>
</form>

所以图标的大小会平滑变化，宽度动画将取决于输入。

【讨论】：

谢谢！！将输入标签放在下面就可以了。