CODEWITHSUNDEEP
javascriptreactjsreact-router-domreact-transition-group
user8930932
user8930932

Reputation: 125

Why the CSSTransition have no animation when component exit?

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

Upvotes: 0

Views: 447

Answers (1)

jmart07
jmart07

Reputation: 11

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

Upvotes: 1

Related Questions