时间戳

首页 > 解决方案 > ReactJS - 在 2 个不同的组件之间淡入淡出

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

问题描述

我试图弄清楚如何通过一个简单的 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>

标签： reactjscss-transitionstransition

解决方案

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

我做了一个简单的例子，你可以在这里查看

推荐阅读