Question

我很难用react-router-dom设置从一个页面到另一个页面的过渡动画。 The exmaple很好，但我无法在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

尝试将Data1 = fread(fin1, 10e6, 'uint8'); Data2 = fread(fin2, 10e6, 'uint8'); DiffA = diff(Data1); DiffB = diff(Data2);重命名为<html> <head> <style> .wrap { height: 400px; width: 700px; background-color: #8087af; position: fixed; z-index: 1031; top: 0; overflow:hidden; } .image { position: fixed; left: 30px; top: 20px; } </style> </head> <body> <div class="wrap"><img src="https://cs5-1.4pda.to/8787400.jpg" alt="" class="image"></div> </body> </html>。

如果你使用这些库，那么

和css classNames也应该是transitionName：https://facebook.github.io/react/docs/animation.html或不是？

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

react-router-dom交换机组件中的动画路由更改

4 个答案: