我尝试使用 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>
);
}
此设置与我的注册页面和表单状态相同,并且在注册时,它可以工作。
谢谢!