React transitions not happening on on this.props.dispatch(push(path))

Question

I am using a react transition to fade in and fade out content.

Mostly this is working fine, however I am noticing that one page is rendering instantly, without going through the transition state.

My event:

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

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

And my mapDispatchToProps in that file

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

Here is how my pathing works:

<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>
    );
  }}
/>

And my 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;
}

Is there anyway to force the animation on this.props.dispatch(push(path)) ?

You

Which page is it that is transitioning instantly? – Prime

do you have fiddle created for same? – Touchline

code you have provided dose not explain your problem better you can add stackbliz / git repo for better understanding, – Chaker

Do you have a copy-paste error? Should .page-exit.page-exit-active have the transition attribute ease-out instead of ease-in? – Gwenngwenneth

In your second route, you only pass location. There's a 3 objects that are normally passed down. history and match seem to be missing. Usually how I handle this is by doing {...props}, but since you're doing deconstructing in the first route, you can't. I would try without deconstruction in your first route so you can pass the required props. – Gwenngwenneth