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

我试图找出如何在两个不同的组件之间用一个简单的1秒过渡来淡入淡出。我曾经玩过SwitchTransition、CSTransition和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>

{showLogin&&(
)}
{showForgotPassword&&(
)}

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

{transitions.map（{item，key，props}）=>
项目(
) : (
)
)}

---

我举了一个简单的例子，你可以查看一下

你也可以为转换共享CSS吗？这是我正在努力解决的问题的一部分。我的意思是我可以添加一些类似于

转换的东西：所有1都很容易

对两个div都适用，但这对我来说似乎从来都不起作用。我该如何增加淡入淡出时间呢？没关系，我从谷歌那里找到了答案

const transitions=useTransition（show，null，{from:{position:“absolute”，不透明度：0}，enter:{opacity:1}，leave:{opacity:0}，config:{duration:1000}）非常感谢！将配置添加到transitions const transitions=useTransition（showLogin，null，{from:{position:“absolute”，不透明度：0}，输入：{opacity:1}，离开：{opacity:0}，配置：{duration:300}//这里您可以更改时间}）；还有一个问题，你知道有没有办法不让它在页面加载时淡入？将“初始”添加到“过渡”，它将在第一次加载时覆盖“from”，这样页面加载时就不会出现动画
initial:{位置：“绝对”，不透明度：1}