javascript - 为什么组件退出时 CSSTransition 没有动画？

Question

有两页。进入页面动画正常，退出页面突然卡住了。

这是版本: "react-router-dom": "^4.2.2", “ react 过渡组”:“^4.0.1”， “ react ”:“^16.4.0”，

这是App.tsx文件中的内容:

const Routes = withRouter(({location}) => (
  <TransitionGroup
    className={'router-wrapper'}
    // childFactory={(child) => React.cloneElement(child)}
  >
    <CSSTransition
      timeout={500}
      classNames={'fade'}
      key={location.pathname}
      unmountOnExit={true}
    >
      <Switch location={location}>
        <Route exact path={'/'} component={Index}/>
        <Route path={'/login'} component={Login}/>
        <Route path={'/signUp'} component={SignUp}/>
      </Switch>
    </CSSTransition>
  </TransitionGroup>
));

class App extends React.Component {
  public render() {
    return (
      <HashRouter>
        <Routes/>
      </HashRouter>
    );
  }
}

以下是 App.less 文件中的一些代码:

  .fade-enter {
    opacity: 0;
    transform: translateX(100%);
  }

  .fade-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 50000ms;
  }
  .fade-exit {
    //position: fixed;
    opacity: 1;
    transform: translateX(0);
  }

  .fade-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 50000ms;
  }

Answer 1

我不确定，但这是根据官方文档:

Note: When using React Transition Group with React Router, make sure to avoid using the Switch component because it only executes the first matching Route. This would make the exit transition impossible to achieve because the exiting route will no longer match the current URL and the children function won't execute.

source