javascript - 使用 ReactTransitionGroup 单独对页面进行动画处理(出现、进入和离开)

Question

我尝试使用 React-router 和 ReactTransitionGroup 为页面转换设置动画。

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

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

像这样，组件只需运行componentWillAppear。我也想设置离开过渡。

正确处理这些问题的最佳方法是什么？

这就是我现在尝试处理 ReactTransitionGroup 的方式:

// App.js
render() {
    const { children, loggedIn, user, application } = this.props;

    const intlData = {
      locale: application.locale,
      messages: i18n[application.locale],
    };

    return (
      <IntlProvider key="intl" {...intlData}>
        <div id="application">
          <div className="page-wrap">
            <Header loggedIn={ loggedIn } user={ user } handleLogout={ this.handleLogout } handleLanguageChange={this.handleLanguageChange} />
            <MainNavigation />
            <ReactTransitionGroup component="div" className="animationContainer" {...this.props}>
              {React.cloneElement(children, {
                key: this.props.location.pathname,
              })}
            </ReactTransitionGroup>
          </div>
          <Footer />
        </div>
      </IntlProvider>
    );
  }

我尝试为我的登录组件创建一个出现、进入和离开动画。

  // 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>
    );
  }

此设置与我的注册页面和表单状态相同，并且在注册中，它有效。

谢谢!

Answer 1

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

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

componentDidAppear() {
  this._setEnterStyle();
}

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

componentDidEnter() {
  this._setEnterStyle();
}

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

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