我在創造一種反應。JS自我教育網絡應用程序。我想創造這樣的東西:https://dribbble.com/shots/5311359-Diprella-Login. 這里是我的沙盒:https://codesandbox.io/s/login-register-znvxjc?文件=/src/components/App.jsx 現在，在我鏈接的例子中，在卡和登錄/注冊部分之間有一個滑動動畫。我試著用變形和秩序來制作它。但是我不能按時到達。有人能幫幫我嗎？

App.jsx

function App() {
  const [isChanged, setIsChanged] = React.useState(false);
  const [whatOrder, setOrder] = React.useState(false);

  return (
    <div className="appContainer">
      <div>{isChanged ? <Register /> : <Login />}</div>
      <div>
        <SlidingCard
          isChanged={isChanged}
          setIsChanged={setIsChanged}
          whatOrder={whatOrder}
          setOrder={setOrder}
        />
      </div>
    </div>
  );
}

export default App;

SlidinCard.jsx

function SlidingCard({ isChanged, setIsChanged }) {
  const loginPaheseTexts = {
    title: "Hello, Friend!",
    description: "Enter your personal details and start jurney with us.",
    button: "Sign Up"
  };

  const registerPhaseTexts = {
    title: "Welcome Back",
    description:
      "To keep connecting with us please login with your personal info.",
    button: "Sign In"
  };

  const texts = isChanged ? registerPhaseTexts : loginPaheseTexts;

  function handleClick(event) {
    console.log("Handle click");
    setIsChanged(!isChanged);
  }

  return (
    <div className={"sliding-card"}>
      <h1>{texts.title}</h1>
      <p>{texts.description}</p>
      <button onClick={handleClick}>{texts.button}</button>
    </div>
  );
}

export default SlidingCard;

登錄。Jsx

function Login() {
  return (
    <div className="loginContainer">
      <div className="loginChildContainer">
        <h1>Welcome Back!</h1>
        <p>Lorem lorem lorem lorem lorem</p>
        <Input type="text" placeholder="Username" />
        <Input type="password" placeholder="Password" />
        <button type="submit">Sign In</button>
      </div>
    </div>
  );
}

export default Login;

注冊. jsx

function Register() {
  return (
    <div className="registerContainer">
      <h1>Create Account</h1>
      <button>
        <FacebookIcon />
      </button>
      <button>
        <GoogleIcon />
      </button>
      <button>
        <TwitterIcon />
      </button>
      <Input type="text" placeholder="Username" />
      <Input type="text" placeholder="email" />
      <Input type="password" placeholder="Password" />
      <button type="submit">Sign In</button>
    </div>
  );
}

export default Register;

鋼性鑄鐵

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

input {
  display: block;
  margin: 1rem auto 1rem auto;
}

.App {
  font-family: sans-serif;
}

.appContainer {
  display: flex;

  border: solid 5px black;
}

.loginContainer {
  position: relative;
  display: inline-block;
  border: solid 2px red;
}

.registerContainer {
  position: relative;
  display: inline-block;
  border: solid 2px blue;
}

當我試圖用變換組件跳轉父div時，沒有進行正確的滑動。當我試著按順序時，它們會向右切換位置，但沒有滑動動畫。我在等你的回答。