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

您可以首先使用 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>

我做了一个简单的例子，大家可以看看here