1

React-router と ReactTransitionGroup を使用してページ遷移をアニメーション化しようとしています。

各ページには異なるトランジションが必要です。

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

このように、コンポーネントはそのまま実行されcomponentWillAppearます。Leaveトランジションも設定したいです。

これらを正しく処理する最善の方法は何ですか?

これは、今のところ 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>
    );
  }

このセットアップは、私の登録ページとフォームの状態と同じであり、登録では機能します。

ありがとうございました！

4

1 に答える 1

0

内側のコンポーネントは、これらの関数をすべて実行します。これらの関数を使用して、入室と退室の動作を設定できます。

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

componentDidAppear() {
  this._setEnterStyle();
}

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

componentDidEnter() {
  this._setEnterStyle();
}

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

したがって、遷移グループによってラップされているため、Login コンポーネントはそれらを実行します。

于 2016-01-22T22:09:51.750 に答える