过渡部分在 React Router 4 中起作用

Question

我正在尝试使用 React router 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

非常感谢您的帮助。

Answer 1

Switch 将呈现匹配的路线。假设 game 匹配 => 游戏将渲染，一旦安装组件，出现转换将运行。现在您转到 winner，这将卸载 game 并安装 winner 路由。您会期望 leave 过渡从 game 开始，但会发生的是 game 将从 dom 中删除（因为卸载），所以运行什么都没有，休假过渡将不起作用。出现转换将从 winner 路线开始。那么该怎么办？

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

过渡部分在 React Router 4 中起作用

Transitions partially working in react router 4

reactjs

react-router

react-transition-group