组件之间的 React 过渡组动画（淡入组件代替另一个）

Question

我在我的应用中使用react-transition-group 制作动画。

我有一个弹出窗口，我想在两个内容之间制作动画。我想让第一个内容淡出，第二个内容出现在它的位置。

到目前为止，我遇到了一个问题，即在为第二个内容设置动画时，第二个内容出现在第一个内容下方，而第一个内容仍然可见。 （见截图）

任何帮助将不胜感激。

我的代码

const [stage, setStage] = useState('register');

  function changeStage(stageVal) {
    setStage(stageVal);
  }
...
<Popup togglePopupWindow={togglePopupWindow} setStage={setStage}>
        <CSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {stage === 'register' && (
          <>
            <Form>
              <h2>Register</h2>
              <Input type="text" placeholder="Login" />
              <Input type="email" placeholder="Email" />
              <Input type="password" placeholder="Password" />
              <Button text="Register" />
            </Form>
            <p>
              <span>Already registered?</span>
              <Button className="popup__login" text="Login" onClick={() => changeStage('login')} />
            </p>
        </>
          )
      }
          {stage === 'login' && (
          <Form>
            <h2>Login</h2>
            <Input type="text" placeholder="Login" />
            <Input type="password" placeholder="Password" />
            <Button text="Register" />
          </Form>
          )
   }
        </CSSTransitionGroup>
      </Popup>

样式

.example-enter {
    opacity: 0;
    }

.example-enter.example-enter-active {
   opacity: 1;
   transition: opacity 500ms ease-in-out;
}

.example-leave {
   opacity: 1;
}

.example-leave.example-leave-active {
   opacity: 0;
   transition: opacity 300ms ease-in-out;
}

Answer 1

尝试在每个...-active CSS 属性上去掉.example-enter 和.example-leave。你将.example-enter 设置为0 不透明度，然后将.example-enter 替换为1。这意味着你正在设置1 在 .example-enter 上与您的 .example-enter-active 在初始声明之后......所以 0 被覆盖。

.example-enter {
    opacity: 0;
    }
.example-enter-active {
   opacity: 1;
   transition: opacity 500ms ease-in-out;
}

.example-leave {
   opacity: 1;
}

.example-leave-active {
   opacity: 0;
   transition: 
}