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

Question

我很难用react-router-dom. 示例很好，但我无法让它Switch在react-router-dom.

我尝试在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也应该是： https ://facebook.github.io/react/docs/animation.html与否？.fade-leave

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

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