javascript - 如何在 React 中使用 Tailwindcss 转换 div

Question

我的侧边栏旁边有一个菜单面板。我正在尝试添加抽屉式动画，但我似乎无法在粉红色列中打开/关闭位置

const album = ["Album1", "Album2", "Album3"];
export const Menu = () => {
  const [open, setOpen] = useState(false);
  return (
    <div className="flex flex-1 flex-col p-3">
      <h2 className="text-lg font-medium text-gray-900">Album</h2>
      <div className="flex-1">
        <div className="flex flex-1 flex-col space-y-3 py-3">
          {album.map((name) => (
            <button
              key={name}
              id={name}
              className={`flex space-x-2 items-center`}
              onClick={() => setOpen(true)}
            >
              <span>{name}</span>
            </button>
          ))}
        </div>
      </div>
      <aside
        onClick={() => setOpen(false)} //temporary
        className={`transform top-0 left-0 w-72 bg-blue-400 fixed h-full overflow-auto ease-in-out transition-all duration-1000 z-30 ${
          open ? "translate-x-14" : "-translate-x-full"
        }`}
      >
        hello
      </aside>
    </div>
  );
};

Answer 1

Javascript。只需将 eventListener 添加到将处理操作的“按钮”。在 eventListener 中，删除或添加一个 css 类。例如，默认情况下位置是“-100px right”，css 将位置设置为“300px right”，还添加一个过渡“all 300ms ease”。现在你的元素开始时没有 css，当用户按下按钮时添加类。

<div class="text-3xl font-bold underline transition-all duration-300" id="must-change">
 Lorem Ipsu
</div>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded" id="press-me">
  Button
</button>

<script>
const btn = document.querySelector("#press-me")
const mustChange =  document.querySelector("#must-change")
btn.addEventListener("click", () => {
  mustChange.classList.toggle("font-bold")
})
</script>

我设置了“全部过渡”，但您可以根据需要使用特定的过渡。