在 react-router-dom switch 组件中动画路由变化

Question

我很难用 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;
}

Answer 1

试试这个：

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

Answer 2

尝试将 classNames 重命名为 transitionName。

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

Answer 3

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

例子

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

Answer 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

在 react-router-dom switch 组件中动画路由变化

Animate route change in react-router-dom switch component

animation

react-router

react-transition-group