为什么组件退出时 CSSTransition 没有动画？答案

【问题标题】：Why the CSSTransition have no animation when component exit?为什么组件退出时 CSSTransition 没有动画？
【发布时间】：2020-01-04 07:12:04
【问题描述】：

有两个页面。进入页面动画还可以，但是退出页面突然卡住了。

这是版本： "react-router-dom": "^4.2.2", “反应过渡组”：“^4.0.1”， “反应”：“^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;
  }

【问题讨论】：

标签： javascript reactjs react-router-dom react-transition-group

【解决方案1】：

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

注意：将 React 转换组与 React Router 一起使用时，请确保避免使用 Switch 组件，因为它只执行第一个匹配的 Route。这将使退出转换无法实现，因为退出路由将不再匹配当前 URL，并且子函数将不会执行。

source

【讨论】：