1

我正在尝试使用反应路由器 4 和 CSSTransitionGroup 为路由之间的过渡设置动画。似乎部分工作 - 进入组件有时会根据需要进行动画处理（但并非总是如此），退出组件会消失而没有过渡。这是未按预期运行的渲染函数：

render() { 

    /****************************************For transitions***********/
    // const locationKey = this.props.location.pathname;

    return (
        <CSSTransitionGroup
          key={this.props.location.key}
          transitionName="flipIt"
          transitionAppear={true}
          transitionAppearTimeout={3000}
          transitionEnterTimeout={3000}
          transitionLeaveTimeout={3000}
        >
        <Switch key={this.props.location.pathname} location={this.props.location}>
            <Route exact path='/' component={Welcome} />
            <Route path='/game' render={(props) => (
              <Board {...props} leaders={this.state.leaders} logGameGoes={this.setGameGoes} />
            )} />
            <Route path='/leaderboard' render={(props) => (
              <Leaderboard {...props} leaders={this.state.leaders} syncLeaders={this.syncLeaders} />
            )} />
            <Route path='/winner' render={(props) => (
              <Winner {...props} addLeader={this.addLeader} />
            )} />
            <Route path='/gameover' render={(props) => (
              <Gameover {...props} goes={this.state.currentGameGoes} />
            )} />
          </Switch>
        </CSSTransitionGroup>
    );
  }
}

export default withRouter(App);

整个应用程序可以在这个沙盒中看到： https ://codesandbox.io/s/vyn7zl2993

非常感谢您的帮助。

4

1 回答 1

1

Switch 将渲染匹配的路由。可以说game是匹配 => 游戏将渲染，并且一旦安装组件就会运行外观过渡。现在您转到winner，这将卸载game并安装winner路线。您会期望leave过渡开始于game，但将会发生的情况是game将其从 dom 中删除（因为卸载），因此没有什么可以运行并且离开过渡将不起作用。外观过渡将在winner路线上开始。那么该怎么办？

您可以使用子函数（https://reacttraining.com/react-router/web/api/Route/children-func）并在卸载路由之前使组件不可见。您不能为此使用 Switch，因为它专门渲染路由。

于 2018-02-14T19:49:14.587 回答