Animation 在react router dom switch组件中设置路由更改动画
我很难用Animation 在react router dom switch组件中设置路由更改动画,animation,react-router,react-transition-group,Animation,React Router,React Transition Group,我很难用react router dom为从一个页面到另一个页面的转换设置动画。很好，但我无法让它在react router dom提供的交换机组件中工作 我试过在开关周围或其内部执行此操作，但它没有任何作用（控制台中也没有警告或错误） 示例 class Layout extends PureComponent { render() { const { account } = this.props; return ( <di
react router domreact router dom交换机组件中工作
我试过在开关周围或其内部执行此操作，但它没有任何作用（控制台中也没有警告或错误）
示例
class Layout extends PureComponent {
render() {
const { account } = this.props;
return (
<div className="MAIN">
<Header image={account.resources.logo} backgroundColor={account.theme} />
<ProgressionBar />
<div className="MAIN__content">
<CSSTransition classNames="fade" timeout={{ enter: 1500, exit: 500 }}>
<Switch key={this.props.location.key} location={this.props.location}>
<Route exact path={`${basePath}start`} component={Start} />
<Route exact path={`${basePath}questions`} component={Questions} />
<Route exact path={`${basePath}comments`} component={Comments} />
<Route exact path={`${basePath}capture`} component={Capture} />
<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
<Route exact path={`${basePath}finish`} component={null} />
</Switch>
</CSSTransition>
<Footer />
</div>
</div>
);
}
}
class Layout extends PureComponent {
render() {
const { account, location } = this.props;
return (
<div className="MAIN">
<Header image={account.resources.logo} backgroundColor={account.theme} />
<ProgressionBar />
<div className="MAIN__content">
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="fade"
timeout={{ enter: 1000, exit: 1000 }}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}
>
<Switch key={location.key} location={location}>
<Route exact path={`${basePath}start`} component={Start} />
<Route exact path={`${basePath}questions`} component={Questions} />
<Route exact path={`${basePath}comments`} component={Comments} />
<Route exact path={`${basePath}capture`} component={Capture} />
<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
<Route exact path={`${basePath}finish`} component={null} />
</Switch>
</CSSTransition>
</TransitionGroup>
<Footer />
</div>
</div>
);
}
}
试试这个：
<CSSTransition key={this.props.location.pathname.split('/')[1]} timeout={500} classNames="fadeTranslate" mountOnEnter={true} unmountOnExit={true}>
<div className="WRAPPER">
<Switch location={this.props.location}>
<Route path="/" exact component={Home} />
<Route path="/blog" component={Blog} />
<Route path="/albumn" component={Albumn} />
</Switch>
</div>
</CSSTransition>
...
试试这个：
<CSSTransition key={this.props.location.pathname.split('/')[1]} timeout={500} classNames="fadeTranslate" mountOnEnter={true} unmountOnExit={true}>
<div className="WRAPPER">
<Switch location={this.props.location}>
<Route path="/" exact component={Home} />
<Route path="/blog" component={Blog} />
<Route path="/albumn" component={Albumn} />
</Switch>
</div>
</CSSTransition>
...
尝试将类名
重命名为转换名
如果您正在使用这些库，css.fade exit
也应该是.fade leave
：是否？尝试将类名重命名为transitionName
如果您正在使用这些库，css.fade exit
也应该是.fade leave
：或者不使用？谢谢@Melounek的帮助，问题在于我需要将csstration
包装在TransitionGroup
中，如react TransitionGroup
的迁移文档所示
示例
class Layout extends PureComponent {
render() {
const { account } = this.props;
return (
<div className="MAIN">
<Header image={account.resources.logo} backgroundColor={account.theme} />
<ProgressionBar />
<div className="MAIN__content">
<CSSTransition classNames="fade" timeout={{ enter: 1500, exit: 500 }}>
<Switch key={this.props.location.key} location={this.props.location}>
<Route exact path={`${basePath}start`} component={Start} />
<Route exact path={`${basePath}questions`} component={Questions} />
<Route exact path={`${basePath}comments`} component={Comments} />
<Route exact path={`${basePath}capture`} component={Capture} />
<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
<Route exact path={`${basePath}finish`} component={null} />
</Switch>
</CSSTransition>
<Footer />
</div>
</div>
);
}
}
class Layout extends PureComponent {
render() {
const { account, location } = this.props;
return (
<div className="MAIN">
<Header image={account.resources.logo} backgroundColor={account.theme} />
<ProgressionBar />
<div className="MAIN__content">
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="fade"
timeout={{ enter: 1000, exit: 1000 }}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}
>
<Switch key={location.key} location={location}>
<Route exact path={`${basePath}start`} component={Start} />
<Route exact path={`${basePath}questions`} component={Questions} />
<Route exact path={`${basePath}comments`} component={Comments} />
<Route exact path={`${basePath}capture`} component={Capture} />
<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
<Route exact path={`${basePath}finish`} component={null} />
</Switch>
</CSSTransition>
</TransitionGroup>
<Footer />
</div>
</div>
);
}
}
类布局扩展了PureComponent{
render（）{
const{account，location}=this.props；
返回(
);
}
}
感谢@Melounek的帮助，问题在于我需要将cstranslation
包装到TransitionGroup
中，如react TransitionGroup
的迁移文档所示
示例
class Layout extends PureComponent {
render() {
const { account } = this.props;
return (
<div className="MAIN">
<Header image={account.resources.logo} backgroundColor={account.theme} />
<ProgressionBar />
<div className="MAIN__content">
<CSSTransition classNames="fade" timeout={{ enter: 1500, exit: 500 }}>
<Switch key={this.props.location.key} location={this.props.location}>
<Route exact path={`${basePath}start`} component={Start} />
<Route exact path={`${basePath}questions`} component={Questions} />
<Route exact path={`${basePath}comments`} component={Comments} />
<Route exact path={`${basePath}capture`} component={Capture} />
<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
<Route exact path={`${basePath}finish`} component={null} />
</Switch>
</CSSTransition>
<Footer />
</div>
</div>
);
}
}
class Layout extends PureComponent {
render() {
const { account, location } = this.props;
return (
<div className="MAIN">
<Header image={account.resources.logo} backgroundColor={account.theme} />
<ProgressionBar />
<div className="MAIN__content">
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="fade"
timeout={{ enter: 1000, exit: 1000 }}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}
>
<Switch key={location.key} location={location}>
<Route exact path={`${basePath}start`} component={Start} />
<Route exact path={`${basePath}questions`} component={Questions} />
<Route exact path={`${basePath}comments`} component={Comments} />
<Route exact path={`${basePath}capture`} component={Capture} />
<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
<Route exact path={`${basePath}finish`} component={null} />
</Switch>
</CSSTransition>
</TransitionGroup>
<Footer />
</div>
</div>
);
}
}
类布局扩展了PureComponent{
render（）{
const{account，location}=this.props；
返回(
);
}
}
试试这个：
<CSSTransition key={this.props.location.pathname.split('/')[1]} timeout={500} classNames="fadeTranslate" mountOnEnter={true} unmountOnExit={true}>
<div className="WRAPPER">
<Switch location={this.props.location}>
<Route path="/" exact component={Home} />
<Route path="/blog" component={Blog} />
<Route path="/albumn" component={Albumn} />
</Switch>
</div>
</CSSTransition>
参考资料：试试这个：
<CSSTransition key={this.props.location.pathname.split('/')[1]} timeout={500} classNames="fadeTranslate" mountOnEnter={true} unmountOnExit={true}>
<div className="WRAPPER">
<Switch location={this.props.location}>
<Route path="/" exact component={Home} />
<Route path="/blog" component={Blog} />
<Route path="/albumn" component={Albumn} />
</Switch>
</div>
</CSSTransition>
参考资料：仍然无效：（请参阅更新的答案了解您的建议。可能是因为这不是BrowserHistory
级别吗？仍然无效：（请参阅更新的答案了解您的建议。可能是因为这不是浏览器历史记录
级别吗？他们降低了该库的价值，将其移至反应转换组
，您发现该组也没有真正起到作用……他们降低了该库的价值，将其移至反应转换组
，您也发现了did。）不是真的有帮助。。。