ReactJS--在2个不同的组件之间淡出。

Question

我正试图找出如何在2个不同的组件之间用一个漂亮的简单的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>

Answer 1

你可以使用response-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>

我做了一个简单的例子，你可以看一下。此处