如何修改表单过渡动画？实现固定放大镜仅移动表单

要让放大镜图标固定不动，仅输入框展开/收起，你需要调整布局结构和定位方式，修改后的代码如下：

import Search from './Icons/SearchIcon';

export default function SearchForm() {
  return (
    <div className="relative">
      <input
        id="input"
        className="transition-[width] duration-[1500ms] text-sm focus:pl-3 focus:outline-none focus:p-1 w-0 focus:w-full border-y border-l border-r bg-white border-slate-200 pr-8"
      />
      <label className="absolute right-0 top-0 border-y border-r p-1 border-slate-200" htmlFor="input">
        <Search />
      </label>
    </div>
  );
}

关键改动说明： #

• 把父容器的flex改为relative，作为图标的定位基准
• 给输入框添加pr-8（右侧内边距），避免输入内容被图标遮挡
• 将图标标签设置为absolute right-0 top-0，固定在父容器的右上角，不再随输入框宽度变化而移动
• 给输入框补上border-r，保证边框完整性（原布局中边框由输入框和标签共同组成，现在输入框需要完整的左右边框）

内容的提问来源于stack exchange，提问作者Michael-Liendo