react依据react-transition-group的路由切换动画

一、涉及的技术栈
react、react-transition-group、react-router-dom
二、实现思路
1.导入路由使用路由模式包裹根组件
2.引入TransitionGroup, CSSTransition
3.利用useLocation()和路由完成切换动画|
三、根组件代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux'
import {store} from './store/store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
  <Provider store={store}>
  <App />
  </Provider>
  </BrowserRouter>

);

四、 具体实现代码

import React, { useState, Suspense } from 'react'
import './App.css'
import { useLocation, Route, Routes,Navigate } from 'react-router-dom'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import RenderRoute from './router/routerview'
import {Authrouter} from './router/norouter'
import Login from './components/login/login'
import List from './components/list/list'
import Shujia from './components/shujia/shujia'

function App() {
  const useLocationWrapper = () => useLocation()
  const location = useLocationWrapper()
  const [isPending, setIsPending] = useState(false)
  const onEnter = () => setIsPending(true)
  const onEntered = () => setIsPending(false)
  return (
    <div className="App">
      <TransitionGroup className="transition-group">
        <CSSTransition
          key={location.key}
          timeout={{ enter: 1500, exit: 1500 }}
          classNames="fade"
          onEnter={onEnter}
          onEntered={onEntered}
        >
          <div className="router-section">
            {/* <RenderRoute location={location}/> */}
            <Routes location={location}>
              <Route path="/login" element={<Login />} /> 
              <Route path="/list" element={<Authrouter><List /></Authrouter>} />
              <Route path="/shujia" element={<Authrouter><Shujia /></Authrouter>} />
            </Routes>
          </div>
        </CSSTransition>
      </TransitionGroup>

    </div>
  );
}

export default App;

注：此路由切换动画不能采用封装的方式否则不会生效
五、css样式
 

*{
  margin: 0;
  padding: 0;
}
.App{
  width: 100vw;
  min-height: 100vh;
}
.transition-group{
  position: relative;
}
.fade-enter{
  opacity: 0;
  transform: rotate(-90deg);
}
.fade-enter-active{
  opacity: 1;
  transform: rotate(0deg);
  transition: opacity 1500ms ease-in-out,transform 1500ms ease-in-out;
}
.fade-exit{
  opacity: 1;
  transform: rotate(0deg);
}
.fade-exit-active{
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity 1500ms ease-in-out,transform 1500ms ease-in-out;
}
.router-section{
  position: absolute;
  top: 0;
  right: 0;
}