Why the CSSTransition have no animation when component exit?

Question

There are two page. Animation of entering page is ok, but the exit page is suddenly become block.

This is version: "react-router-dom": "^4.2.2", "react-transition-group": "^4.0.1", "react": "^16.4.0",

This is content in App.tsx file:

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

Here are some code in App.less file:

  .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;
  }

score 1 · Answer 1 · answered Jan 03 '20 at 23:12

I'm not sure, but this is per the official documentation:

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

Why the CSSTransition have no animation when component exit?

1 Answers1