Javascript 使用ReactTransitionGroup单独设置页面动画（显示、输入和离开）

我尝试使用React router和React TransitionGroup设置页面转换动画

每个页面必须有不同的过渡

<ReactTransitionGroup component="div" className="animationContainer" {...this.props}>
  <Login />
</ReactTransitionGroup>

我尝试为我的登录组件创建一个显示、输入和离开动画

  // login.js
  componentWillLeave(callback) {
    setTimeout(callback, 2000);
    console.log('componentWillLeave'); // doesn't log
  }

  /**
   * Reçoit les valeurs des formulaires
   */
  handleFormSubmit(data) {
    const { dispatch } = this.props;

    dispatch(fetchLoginAuth(data));
  }

  /**
   * Render le component - ReactTransitionGroup
   * @return {JSX} Rend la page Registration
   */
  render() {
    return (
      <div id="login-page">
        <div className="container-fluid">
          <div className="row">
            <div className="col-md-2">
              <Link to="/" className="home-link"><img src={BASE_URL + '/assets/img/logo.svg'} alt="logo" /></Link>
            </div>
          </div>
          <div className="row">
            <div className="col-lg-4 col-lg-offset-4">
              <h1><FormattedMessage {...messages.loginPageTitle} /></h1>
            </div>
          </div>
          {React.cloneElement(this.props.children || <div />, { onSubmit: this.handleFormSubmit, login: this.props.login })}
        </div>
      </div>
    );
  }

//login.js
组件将离开（回调）{
setTimeout（回调，2000）；
console.log（'componentWillLeave'）；//不记录
}
/**
*关于公式的价值
*/
handleFormSubmit（数据）{
const{dispatch}=this.props；
调度（获取登录号（数据））；
}
/**
*渲染le组件-ReactTransitionGroup
*@return{JSX}Rend la页面注册
*/
render（）{
返回(
{React.cloneElement（this.props.children | | |，{onSubmit:this.handleFormSubmit，login:this.props.login}
);
}

此设置与我的注册页面和表单状态相同，在注册中，它可以正常工作

---

谢谢大家!

内部组件将执行所有这些函数，您可以使用这些函数设置进入和离开行为

componentWillAppear(callback) {
  setTimeout(callback, 1);
}

componentDidAppear() {
  this._setEnterStyle();
}

componentWillEnter(callback) {
  setTimeout(callback, 1);
}

componentDidEnter() {
  this._setEnterStyle();
}

componentWillLeave(callback) {
  this._setLeaveStyle();
  setTimeout(callback, 500);
}

---

因此，您的登录组件将执行这些功能，因为它由转换组包装。

内部组件将执行所有这些功能，您可以使用这些功能设置进入和离开行为

componentWillAppear(callback) {
  setTimeout(callback, 1);
}

componentDidAppear() {
  this._setEnterStyle();
}

componentWillEnter(callback) {
  setTimeout(callback, 1);
}

componentDidEnter() {
  this._setEnterStyle();
}

componentWillLeave(callback) {
  this._setLeaveStyle();
  setTimeout(callback, 500);
}

---

因此，您的登录组件将执行这些操作，因为它由转换组包装。

我知道。。。但是组件将离开不会工作。有没有可能是因为我点击了react路由器的链接？你有没有特别尝试过使用我在方法中提到的setTimeout？我相信设置为该值的延迟需要与动画持续时间一样长。我不明白为什么路由器会干扰。我尝试了很多事情，而你的是我尝试的第一件事：It’谢谢你的帮助！我现在很迷茫…好吧，唯一能让它不着火的是，如果你不把孩子从反应过渡组中移除。要执行动画，必须完全不包含具有该id的子对象。如果你有相同的id留在那里，我会认为它只是更改了，而不是删除了。我如何处理这个问题？我试图设置一个状态

renderingComp:false

，当状态为false时，我渲染一个，并设置一个setTimeout将状态更改为true并渲染组件，但它不起作用。我赞成你的回答，谢谢你。我知道。。。但是组件将离开不会工作。有没有可能是因为我点击了react路由器的链接？你有没有特别尝试过使用我在方法中提到的setTimeout？我相信设置为该值的延迟需要与动画持续时间一样长。我不明白为什么路由器会干扰。我尝试了很多事情，而你的是我尝试的第一件事：It’谢谢你的帮助！我现在很迷茫…好吧，唯一能让它不着火的是，如果你不把孩子从反应过渡组中移除。要执行动画，必须完全不包含具有该id的子对象。如果你有相同的id留在那里，我会认为它只是更改了，而不是删除了。我如何处理这个问题？我试图设置一个状态

renderingComp:false

，当状态为false时，我渲染一个，并设置一个setTimeout将状态更改为true并渲染组件，但它不起作用。我投票支持你的答案以感谢你。