ReactJS - переход между двумя разными компонентами - PullRequest
Новая
       51

ReactJS - переход между двумя разными компонентами

1 голос
/ 27 мая 2020

Я пытаюсь понять, как плавно переходить между двумя разными компонентами с помощью простого 1-секундного перехода. Я поигрался с SwitchTransition, CSSTransition и TransitionGroup, и, похоже, у меня ничего не работает. Похоже, что SwitchTransition - это то, что я ищу, но единственные примеры, которые я могу найти, это просто замена текста, а не целых компонентов.

Итак, вот код для двух моих компонентов, которые показаны условно в зависимости от состояния переменные. У каждого компонента есть кнопка, которая меняет местами значения переменных состояния, так что в настоящее время он будет переключаться между ними, но это выглядит не очень красиво. 

<div className="login col-md-6 mt-5 mx-auto">
  {showLogin && (
    <LoginForm
      onLoginSubmit={onLoginSubmit}
      email={email}
      setEmail={setEmail}
      password={password}
      setPassword={setPassword}
      showPasswordReset={showPasswordReset}
    />
  )}
  {showForgotPassword && (
    <ForgotPasswordForm
      onPasswordResetSubmit={onPasswordResetSubmit}
      setShowForgotPassword={setShowForgotPassword}
    />
  )}
</div>

1 Ответ

1 голос
/ 29 мая 2020

Вы можете использовать react-spring для анимации ваших компонентов, сначала 

import { animated, useTransition } from "react-spring";

затем внутри вашего компонента 

const [showLogin, set] = useState(false);

const toggle = () => {
    set(!showLogin);
};

const transitions = useTransition(showLogin, null, {
        from: { position: "absolute", opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 }
      });

, а затем вы визуализируете свои компоненты, обязательно замените div с animated.div 

<div className="login col-md-6 mt-5 mx-auto">
    {transitions.map(({ item, key, props }) =>
        item ? (
            <LoginForm //animated.div
                onLoginSubmit={onLoginSubmit}
                email={email}
                setEmail={setEmail}
                password={password}
                setPassword={setPassword}
                showPasswordReset={showPasswordReset}
            />
        ) : (
            <ForgotPasswordForm //animated.div
                onPasswordResetSubmit={onPasswordResetSubmit}
                setShowForgotPassword={toggle}
            />
        )
    )}
</div>

Я сделал простой пример, вы можете проверить здесь

...