登录跳转动画效果

父组件

import './App.css';
import { TransitionGroup, CSSTransition } from "react-transition-group";
import { BrowserRouter as Router, Route, Switch,Redirect,withRouter } from 'react-router-dom'
import Login from './view/login';
import Home from './view/home.js';
function App() {
  const AnimatedSwitch = withRouter(({ location }) => (
    <TransitionGroup>
      <CSSTransition key={location.key} classNames="slide" timeout={300}>
      <Switch>
          <Route path='/login' component={Login} />
          <Route path='/home' component={Home} />
          <Redirect from='/' to='/login' />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  ));
  return (
    <>
      <Router>
        <AnimatedSwitch />
      </Router>
    </>
  );
}
export default App;

 css

.slide-enter {
  opacity: 0;
  transform: translateX(100%);
}
.slide-enter-active {
  opacity: 3;
  transition: all 300ms ease-in-out;
  transform: translateX(0);
}
.slide-exit {
  opacity: 3;
  transform: translateX(0);
}
.slide-exit-active {
  opacity: 0;
  transition: all 300ms ease-in-out;
  transform: translateX(-100%);
}