Почему у CSSTransition нет анимации при выходе из компонента? - PullRequest
Новая
       21

Почему у CSSTransition нет анимации при выходе из компонента?

0 голосов
/ 22 мая 2019

Есть две страницы.Анимация входа на страницу в порядке, но страница выхода внезапно становится заблокированной.

Это версия: "response-router-dom": "^ 4.2.2", "response-transition-group": "^ 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;
  }
...