react-router-dom 开关组件中的动画路由更改答案

【问题标题】：Animate route change in react-router-dom switch componentreact-router-dom 开关组件中的动画路由更改
【发布时间】：2017-10-18 05:34:12
【问题描述】：

我很难用react-router-dom 为从一页到另一页的过渡设置动画。 The exmaple 很好，但我无法让它在 react-router-dom 提供的 Switch 组件中工作。

我已经尝试在Switch 组件周围或内部执行此操作，但它没有执行任何操作（控制台中也没有警告或错误）。

示例

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

CSS

.fade-enter {
    opacity: 0.01;
}

.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
}

.fade-exit {
    opacity: 1;
}

.fade-exit.fade-exit-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
}

【问题讨论】：

标签： animation react-router react-transition-group

【解决方案1】：

试试这个：

<CSSTransition classNames="test" transitionLeaveTimeout={300}>
  <Switch key={this.props.location.pathname} location={this.props.location}>
    ...
  </Switch>
</CSSTransition>

【讨论】：

仍然没有效果:(请参阅更新的答案以了解您的建议。可能是因为这不是BrowserHistory 级别？

【解决方案2】：

尝试将classNames 重命名为transitionName。

如果您使用这些库，css .fade-exit 也应该是 .fade-leave：https://facebook.github.io/react/docs/animation.html 或不？

【讨论】：

他们贬低了那个库，它移到了react-transition-group，你可以找到here
另外comments here 并没有真正帮助...

【解决方案3】：

感谢@Melounek 的帮助，问题在于我需要将CSSTransition 包装在TransitionGroup 中，如react-transition-group 的迁移文档中所示。

示例

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

【讨论】：

【解决方案4】：

试试这个：

 <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>

参考：https://github.com/ReactTraining/react-router/issues/5279#issuecomment-315652492

【讨论】：