Реагировать на не происходящие переходы на this.props.dispatch (push (путь)) - PullRequest
Новая
       23

Реагировать на не происходящие переходы на this.props.dispatch (push (путь))

5 голосов
/ 09 июня 2019

Я использую переход реакции для постепенного увеличения и уменьшения содержания.

В основном это работает нормально, однако я замечаю, что одна страница отображается мгновенно, без прохождения состояния перехода.

Мое событие: 

  routeChange =(e) => {
    if(e.target.nodeName == "LI" || e.target.nodeName == "a") {
      return;
    }

    let path = "/detail/" + this.state.merchant.id;
    this.props.dispatch(push(path));
  }

И мой mapDispatchToProps в этом файле 

function mapDispatchToProps(dispatch) {
  let actions = bindActionCreators({ saveColor }, dispatch);
  return { ...actions, dispatch };
}

Вот как работает мой путь: 

<Route
  render={({ location }) => {
    const { pathname } = location;
    return (
      <TransitionGroup className="transition-group">
        <CSSTransition
          key={pathname}
          classNames="page"
          timeout={{
            enter: 1000,
            exit: 1000,
           }}
          >
          <Route
            location={location}
            render={() => (
              <Switch>
                <Route exact path="/login" component={LoginPage} />
                <Route exact path="/detail" component={Detail} />
                <PrivateRoute exact path="/" component={Cards} />
              </Switch>
            )}
          />
        </CSSTransition>
      </TransitionGroup>
    );
  }}
/>

И мой CSS:

.page-enter {
    opacity: 0.01;
}

.page-enter.page-enter-active {
    opacity: 1;
    transition: opacity 3000ms ease-in;
}

.page-exit {
    opacity: 0;
}

.page-exit.page-exit-active {
    opacity: 0.01;
    transition: opacity 3000ms ease-in;
}

Есть ли способ принудительно запустить анимацию в this.props.dispatch (push (path))?

...