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

Question

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

这是codesandbox

代码虽然冗长，但让我分解它快速分解。

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

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

我还通过将搜索栏移动 div 的位置设置为相对并将搜索图标设置为绝对，将相同的搜索图标放置在搜索输入中。

但是当搜索栏处于关闭位置时：绝对会立即从搜索图标中删除，使其立即捕捉到其原始位置。但我想顺利过渡，你能提出任何修复建议吗？

Answer 1

你必须做两件事

首先 - 将下面class的样式改成这样

.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>

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

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

Fix to make transition smooth in CSS (animated search bar)

html

css

transition

reactjs