父组件
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%);
}