创建了一个滑出菜单组件，试图将其设置为从左侧打开，一直从右侧打开并滑到左侧

Question

我有一个 React 滑出菜单组件正在开发中，我将把它用作更大的侧边栏导航的一部分。

我的动画触发正确，但不是从屏幕左侧打开，而是从右侧打开，然后滑到左侧。

我调整了 CSS 并对元素的布局方式进行了各种代码更改，但我仍然遇到同样的问题。此时我不确定是代码问题还是CSS

滑出菜单组件

import React from "react";

export default function Drawer({ children, isOpen, setIsOpen }) {
  return (
    <main
      className={
        " fixed overflow-hidden z-10 bg-gray-900 bg-opacity-25 inset-0 transform ease-in-out " +
        (isOpen
          ? " transition-opacity opacity-100 duration-500 translate-x-0  "
          : " transition-all delay-500 opacity-0 translate-x-full  ")
      }
    >
      <section
        className={
          " w-9/12 max-w-lg absolute bg-white h-full shadow-xl delay-400 duration-500 ease-in-out transition-all transform  " +
          (isOpen ? " translate-x-0 " : " translate-x-full ")
        }
      >
        <article className="relative w-screen max-w-lg pb-10 flex flex-col space-y-6 overflow-y-scroll h-full">
          <header className="p-4 font-bold text-lg">Header</header>
          {children}
        </article>
      </section>
      <section
        className=" w-screen h-full cursor-pointer "
        onClick={() => {
          setIsOpen(false);
        }}
      ></section>
    </main>
  );
}

Answer 1

如果你用 width 改变 isOpen 的条件，它就会如你所愿

<section className={"max-w-lg absolute bg-white h-full shadow-xl 
    delay-400 duration-500 ease-in-out transition-all transform  " +
     (isOpen ? " w-9/12" : " w-0 ")}>

https://codesandbox.io/s/react-with-tailwinds-drawer-forked-7d9m6z?file=/src/Drawer.js:1026-1027

Answer 2

只需添加一个减号即可解决问题。

 <section className={"max-w-lg absolute bg-white h-full shadow-xl 
    delay-400 duration-500 ease-in-out transition-all transform  " +
     (isOpen ? " -translate-x-0 " : " -translate-x-full ")}>

创建了一个滑出菜单组件，试图将其设置为从左侧打开，一直从右侧打开并滑到左侧

Created a slide out menu component trying to set it to open from the left, keeps opening from the right and sliding over to the left

javascript

css

reactjs

tailwind-css