左右滑动路由动画效果

App.js

import './App.css'
import { useRoutes, useLocation, useNavigate } from 'react-router-dom'
import router from './router'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import {TransitionGroup,CSSTransition} from 'react-transition-group'
function App() {
  const element = useRoutes(router)
  const location = useLocation()
  console.log(location);
  const navigate = useNavigate()
  return (
    <>
      <div className="App">
        <Tabbar activeColor='#f44336' inactiveColor='#000' onChange={(e) => navigate(e)}>
          <Tabbar.Item icon={<HomeO />} name='/home'>颜色</Tabbar.Item>
          <Tabbar.Item icon={<Search />} name='/home1'>颜色</Tabbar.Item>
          <Tabbar.Item icon={<FriendsO />} name='/home4'>颜色</Tabbar.Item>
          <Tabbar.Item icon={<SettingO />}>颜色</Tabbar.Item>
        </Tabbar>

      </div>
      <TransitionGroup>
        <CSSTransition timeout={1000} classNames="dg" key={location.key} unmountOnExit>
          <div className='bottom'>{element}</div>
        </CSSTransition>
      </TransitionGroup>
    </>
  );
}

export default App;

App.css

body,
html,
#root{
  height: 100%;
}
/* 360普通旋转 */
/* .fdp-enter {
  opacity: 1;
  transform: rotate(0deg);
}

.fdp-enter-active {
  opacity: 1;
  transform: rotate(360deg);
  transition: 800ms ease-out;
}

.fdp-exit {
  opacity: 1;
  transform: rotate(360deg);
}

.fdp-exit-active {
  opacity: 0;
  transform: rotate(0deg);
  transition: 500ms ease-out;
} */

/* 入场动画过程 */
.dg-enter{
  transform: translateX(200px)
}
.dg-enter-active{
  transition: 2s;
  transform: translateX(0px)
}
.dg-enter-done{
  transform: translateX(0px)
}
/* 出场动画过程 */
.dg-exit{
  transform: translateX(0px)
}
.dg-exit-active{
  transition: 2s;
  transform: translateX(200px)
}
.dg-exit-done{
  transform: translateX(200px)
}
.bottom{
  padding-bottom: 60px;
}

路由动画效果