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

尝试在每个.example-enter CSS属性中取出.example-leave和...-active。将.example-enter设置为0不透明度，然后将.example-enter替换为1 ..表示您是在初始声明后使用1在.example-enter上设置.example-enter-active的{... 1}，因此覆盖了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: 
}

在组件之间反应过渡组动画（淡入组件以替代另一个）

1 个答案: