如何更改表单的过渡？答案

【问题标题】：How do I change the transition of a form?如何更改表单的过渡？
【发布时间】：2022-12-14 10:23:41
【问题描述】：

我有这种过渡形式

我希望放大镜保持不动，而表格可以移动

我的代码：

import Search from './Icons/SearchIcon';

export default function SearchForm() {
  return (
    <div className="flex">
      <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 bg-white border-slate-200"
      />
      <label className="border-y border-r p-1 border-slate-200" htmlFor="input">
        <Search />
      </label>
    </div>
  );
}

【问题讨论】：

我认为动画会按照您的要求进行（放大镜保持在右侧，但我想您希望输入锚定在右侧并向左扩展？
是的，我想这样做，但我不知道怎么做

标签： javascript next.js tailwind-css

【解决方案1】：

看起来你的动画做了你想要的。

您的组件几乎准备就绪，它只是缺少一个类来执行您想要的操作：

在您的主 div 上添加 justify-end，它应该可以解决问题。

【讨论】：