ReactJS

Question

我正在尝试弄清楚如何通过 1 秒的轻松过渡在 2 个不同的组件之间淡入淡出。我玩过 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

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

ReactJS - Fade between 2 different components

css-transitions

transition