javascript - 在 Reactjs 中为条件组件设置动画以滑入、淡入

Question

我正在尝试通过动画添加一些用户体验。问题是我设置屏幕的方式。目前我不会在侧边栏关闭时渲染它，它看起来很棒并且响应迅速，但由于我选择的布局，我似乎无法添加动画。由于有条件渲染的组件似乎不适用于动画。

export default function Layout(props) {
  const [open, setOpen] = useState(false);
  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });

  return (
    <div className="relative h-screen w-screen flex">
      
/// SIDEBAR
      {open && (
        <section className={"fixed top-0 left-0 bg-white h-screen z-20 w-64  md:relative md:w-1/3 delay-400 duration-500 ease-in-out transition-all transform  "
          + (open ? " translate-x-0 " : " translate-x-full ")}></section>
      )}

      {open && isMobile && (
        <div
          onClick={(ev) => {
            setOpen(false);
          }}
          className="fixed left-0 mt-0 bg-black bg-opacity-60 w-screen h-screen z-10"
        ></div>
      )}

      <div className="relative w-full h-full">
/// TOP BAR
        <div className="absolute top-0 h-16 w-full bg-blue-600  flex flex-row items-center p-2 z-5">
          <MenuIcon
            onClick={(ev) => {
              setOpen(!open);
            }}
            className="text-white"
            width={30}
            height={30}
          ></MenuIcon>
        </div>

/// CONTENT
        <div className="pt-16 h-full w-full overflow-y-auto">{props.children}</div>
      </div>
    </div>
  );
}

尝试使用这样的东西delay-400 duration-500 ease-in-out transition-all transform " + (isOpen ? " translate-x-0 " : " translate-x-full ")

有没有办法用我当前的设置来做出现/消失的动画，还是我必须完全改变布局？

这就是它目前的样子

标签： javascriptcssreactjscss-animationstailwind-css